Создание окна автоматической подсказки в нескольких столбцах в UWP

Question

Я уже внедрил в своем приложении поле Автозаполнение, но проблема в том, что я хочу сделать всплывающее предложение в виде нескольких столбцов, а не обычный список предложений только с одним столбцом.

Кроме того, я хочу сделать список предложений более широким, чем текстовое поле, Например, я установил для элемента управления AutoSuggestBox значение 100 (текстовое поле) и хочу, чтобы список предложений устанавливался как ширина 300.

Я пытался использовать Control.ItemTemplate на моем Renderer, но я не знаю, как запустить и поместить какой-либо объект в 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.