Question

我已经在我的应用程序中实现了“自动建议”框，但是问题是我希望将建议“弹出”设置为多列，而不是仅包含一列的普通建议列表。

此外，我想使建议列表的宽度大于文本框，例如，我将AutoSuggestBox控件设置为100（文本框），并且希望将建议列表设置为宽度300。

我在渲染器上尝试了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-xaml github上提交您的想法。

在UWP的多列中创建自动建议框

1 个答案: