有没有办法在我的 uwp listview 上显示 api 内容的过滤器

Question

这是目前我的列表视图，我想搜索 :Value.Name
要对其进行排序，使其在列表视图中有 28.000 个项目，如果我在文本框中键入该字母，我只想显示带有字母 x 的项目，我尝试使用谷歌搜索，但没有得到我想要的内容

<ListView x:Name="MylistView" ItemsSource="{x:Bind Osrss, Mode=OneWay}">
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="5*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Items" FontSize="25" FontWeight="Bold"/>
                        <TextBlock Text="Info"  FontSize="25" FontWeight="Bold" Grid.Column="1"/>
                    </Grid>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="1*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Value.Name}" Margin="0,20,0,8"
                           FontSize="24" 
                           FontStyle="Italic"
                           FontFamily="Agency FB"
                           FontWeight="SemiBold"
                           Foreground="DarkBlue"/>
                        <TextBlock Text="{Binding Value.Modelid}" Margin="0,20,20,8"
                           FontSize="16"
                           Foreground="DarkGray" 
                           Opacity="0.8" Grid.Column="1"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment"  Value="Stretch"></Setter>
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>

这是我的 api 包装器

public class ApiWrapper
    {

        public static async Task<Dictionary<string, Osrs>> GETOsrs()
        {
            Uri request = new Uri(@"https://raw.githubusercontent.com/Chasesc/OSRS-API-Wrapper/master/items_osrs.json");

            HttpClient client = new HttpClient();
            client.DefaultRequestHeaders.Add("User-Agent", "NavigationViewExample");
            client.DefaultRequestHeaders
              .Accept
              .Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));//ACCEPT header

            HttpResponseMessage respons = await client.GetAsync(request);
            if (respons.IsSuccessStatusCode == false)
            {
                MessageDialog md = new MessageDialog("error");
                await md.ShowAsync();
                return null;
            }

            respons.EnsureSuccessStatusCode();
            respons.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue( "application/json");
            Dictionary<string, Osrs> osrs = await respons.Content.ReadAsAsync<Dictionary<string,Osrs>>();



            return osrs;
        }


    }

Answer 1

要对其进行排序，使其在列表视图中有 28.000 个项目，如果我在文本框中键入该字母，我只想显示带有字母 x 的项目，

根据您的要求，更好的方法是将 Dictionary 转换为 ObservableCollection，然后使用 linq 通过键入来过滤集合。

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }
    private ObservableCollection<Osrs> _tempList;
    public ObservableCollection<Osrs> Osrss { get; set; } = new ObservableCollection<Osrs>();

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string PropertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
    }
    private async void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var osrss = await ApiWrapper.GETOsrs();
        foreach (var item in osrss.Values)
        {
            Osrss.Add(item);
        }
        _tempList = Osrss; 
    }

    private void SearchBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        var txt = (sender as TextBox).Text;
        var list = _tempList.Where(p => p.Name.Contains(txt, StringComparison.CurrentCultureIgnoreCase)).ToList();
        MylistView.ItemsSource = list;

    }
}

Xaml

<TextBox x:Name="SearchBox" VerticalAlignment="Stretch" TextChanged="SearchBox_TextChanged" />
<ListView x:Name="MylistView" Grid.Row="1" ItemsSource="{x:Bind Osrss,Mode=OneWay}">
    <ListView.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="5*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Items" FontSize="25" FontWeight="Bold"/>
                <TextBlock Text="Info"  FontSize="25" FontWeight="Bold" Grid.Column="1"/>
            </Grid>
        </DataTemplate>
    </ListView.HeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" Margin="0,20,0,8"
                   FontSize="24" 
                   FontStyle="Italic"
                   FontFamily="Agency FB"
                   FontWeight="SemiBold"
                   Foreground="DarkBlue"/>
                <TextBlock Text="{Binding Modelid}" Margin="0,20,20,8"
                   FontSize="16"
                   Foreground="DarkGray" 
                   Opacity="0.8" Grid.Column="1"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment"  Value="Stretch"></Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>