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

【问题标题】：autosuggestbox for listview items列表视图项目的自动建议框
【发布时间】：2017-01-17 06:09:31
【问题描述】：

我在我的应用中创建了一个列表视图，我想为它添加搜索栏。我已经浏览了很多论坛，但并没有得到它。我知道我必须使用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)
    {

    }
    }
}

【问题讨论】：

我现在无法测试您的代码。尝试在 autosuggesttextchanged 方法中编写代码，在 hlist ObservableCollection 中执行搜索。此集合是您的 ListView 的数据源，因此如果您使用 LINQ 进行过滤，ListView 会使用新内容更新自身。

标签： c# xaml listview uwp autosuggest

【解决方案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 中键入一个字母时，列表视图会使用输入的字母进行更新，但它没有按照第一个字母的含义进行更新，就像我键入 'f ' 那么 listview 不会更新以 'f' 开头的项目，而是更新整个项目中包含 'f' 字母的项目。我不能直接超出以'f'开头的单词
它在我的手机上正常工作。谢谢你。我想我得先把电脑上的应用卸载掉再部署上去。