列表视图项的自动建议框

我在我的应用程序中做了一个列表视图，我想为它添加搜索栏。我已经去了很多论坛，但不能得到它。我知道我必须使用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)
    {
    }
    }
}

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;
        }
    }