listview项目的autosuggestbox

Question

I have made a listview in my app and I wants to add searchbar for it. I have gone over many forums but cnt get it. I knw I have to use AutoSuggestBox but don't get the correct method. Here is my code hope someone can help over it..

<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 file

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

Try this code:

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

Please note that I need to set a name for the AutoSuggestBox (x:Name="box"). And note that the XAML : ItemsSource="{Binding Source={StaticResource herolistview}}" is useless, because from the code-behind you overwrite the ItemsSource property! :-)