列表视图项目的自动建议框

Question

我在我的应用程序中制作了一个列表视图，我想为其添加搜索栏。我浏览了很多论坛，但还是不明白。我知道我必须使用 AutoSuggestBox 但没有得到正确的方法。这是我的代码希望有人能帮助它..

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Column="1" Padding="15,0,0,0">
            <AutoSuggestBox PlaceholderText="Search" TextChanged="autosuggesttextchanged" QuerySubmitted="autosuggestquerysubmitted" SuggestionChosen="autosuggestsuggestionchosen"/>
        </StackPanel>

        <ListView x:Name="list" ItemsSource="{Binding Source={StaticResource herolistview}}" ItemClick="itemclicked" IsItemClickEnabled="True" Margin="5,0,0,0" Grid.Row="1" Grid.ColumnSpan="2">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <StackPanel Orientation="Horizontal" Padding="0,4">
                            <Image Height="50" Width="88" Source="{Binding image}"></Image>
                            <TextBlock Text="{Binding name}" HorizontalAlignment="Center" Foreground="White" Padding="8,0,0,0"></TextBlock>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding key}' FontWeight="Bold" FontSize="20"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid MaximumRowsOrColumns="2"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </ListView.GroupStyle>

        </ListView>

    </Grid>
</Grid>

.cs 文件

public sealed partial class MainPage : Page
{
    ObservableCollection<mainpageclass> hlist = new ObservableCollection<mainpageclass>();


    public MainPage()
    {
        this.InitializeComponent();
        Filldata();
    }
    void Filldata()
    {
        hlist.Add(new mainpageclass { name = "Aba" });
        hlist.Add(new mainpageclass { name = "Al" });
        hlist.Add(new mainpageclass { name = "Anon" });
        hlist.Add(new mainpageclass { name = "An"});
        hlist.Add(new mainpageclass { name = "Aren" });
        hlist.Add(new mainpageclass { name = "Boe"});
        list.ItemsSource = hlist;
    }

    private void autosuggesttextchanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
    {
        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
        {

        }
    }

    private void autosuggestquerysubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
    {

    }

    private void autosuggestsuggestionchosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
    {

    }
    }
}

Answer 1

试试这个代码：

private void autosuggesttextchanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
    {
        if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
        {
            var filtered = hlist.Where(i => i.name.Contains(this.box.Text)).ToList();
            list.ItemsSource = filtered;
        }
    }

请注意，我需要为 AutoSuggestBox 设置一个名称 (x:Name="box")。请注意 XAML : ItemsSource="{Binding Source={StaticResource herolistview}}" 是无用的，因为您从代码隐藏中覆盖了 ItemsSource 属性！ :-)

列表视图项目的自动建议框

autosuggestbox for listview items

c#

xaml

listview

autosuggest

uwp