在 UWP 中将自动建议框创建到多列中

Question

我已经在我的应用程序中实现了自动建议框，但问题是我想将建议弹出到多个列中，而不是只有一列的普通建议列表。

另外，我想让建议列表比文本框更宽， 例如，我将 AutoSuggestBox 控件设置为 100（文本框），我希望建议列表设置为 300 的宽度。

我在 Renderer 上尝试了 Control.ItemTemplate，但我不知道如何开始并在 Control.ItemTemplate 上放置一些对象，因为我在 Native 上看到了一些可以自定义的实现。

在 UWP XAML 上，他们有这个实现来自定义建议列表

在我的 UWP 渲染器上，我有一个这样的功能。

        private void UpdateItemsSource()
        {            
            Control.ItemTemplate = new Windows.UI.Xaml.DataTemplate();

            Control.ItemsSource = Element?.ItemsSource;
        } 

我想要像这样实现一些东西，因为也许它可以解决我的问题。

https://social.msdn.microsoft.com/Forums/en-US/d6242794-715f-4aa4-91a4-5d8d675fbf71/uwp-xaml-autosuggestbox-with-button-in-itemtemplate?forum=wpdevelop

<AutoSuggestBox.ItemTemplate>
    <DataTemplate>
        <Grid HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="{Binding}" HorizontalAlignment="Left"/>
            <Button Grid.Column="1" Name="EditSuggestionButton" FontFamily="Segoe MDL2 Assets" Content="&#xE104;"
                    Click="EditSuggestionButton_Click" ClickMode="Press"/>
        </Grid>
    </DataTemplate>
</AutoSuggestBox.ItemTemplate>

<AutoSuggestBox.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</AutoSuggestBox.ItemContainerStyle>

Answer 1

我想将建议弹出到多列，而不是只有一列的普通建议列表。

您可以通过将 DataTemplate 定义为其 ItemsTemplate 来实现此目标。

请参阅以下代码示例以供参考：

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
            TextChanged="AutoSuggestBox_TextChanged">
        <AutoSuggestBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Name}" Grid.Column="0"></TextBlock>
                    <TextBlock Text="{Binding Age}" Grid.Column="1" Margin="2"></TextBlock>
                    <TextBlock Text="{Binding Desc}" Grid.Column="2" Margin="2"></TextBlock>
                </Grid>
            </DataTemplate>
        </AutoSuggestBox.ItemTemplate>
    </AutoSuggestBox>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
    {
        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
        {
            sender.ItemsSource = GenerateSuggestionData();
        }
    }

    private ObservableCollection<Test> GenerateSuggestionData()
    {
        ObservableCollection<Test> tests = new ObservableCollection<Test>();
        tests.Add(new Test() { Name = "Alan", Age = 20, Desc = "T1" });
        tests.Add(new Test() { Name = "Helen", Age = 22, Desc = "T2" });
        tests.Add(new Test() { Name = "James", Age = 18, Desc = "T3" });
        return tests;
    }
}

public class Test
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Desc { get; set; }
}

我想让建议列表比文本框更宽，例如，我将 AutoSuggestBox 控件设置为 100（文本框），我希望建议列表设置为 300 的宽度。

弹出窗口的宽度在 AutoSuggestBox 的代码隐藏中控制，您无法更改它。你可以在microsoft-ui-xamlgithub 上提交你的想法。