如何在UWP的增量(延迟)加载ListView中实现SearchBox功能 [英] How to implement SearchBox functionality in incrementally(Lazy) loaded ListView of UWP

问题描述

我在UWP Application中有一个ListView，它在第一次加载时绑定了100个项目，然后在加载完成后绑定了另外100个，即它是增量加载的.

I have a ListView in UWP Application which binds 100 items on 1st load, then after loading is completed it binds another 100 i.e. it is incrementally loaded.

这是一个代码:

<ListView x:Name="lstWords" ItemsSource="{Binding Items}" DataFetchSize="1" IncrementalLoadingTrigger="Edge" IncrementalLoadingThreshold="5" SelectionChanged="lstItems_SelectionChanged">
   <ListView.ItemTemplate>
     <DataTemplate>
       <StackPanel>
         <TextBlock Text="{Binding Name}"></TextBlock>
         <TextBlock Text="{Binding ID}" Visibility="Collapsed"></TextBlock>
       </StackPanel>
     </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

将这个ListView与增量加载(延迟加载)绑定的代码如下:

And the code which binds This ListView with incremental loading (Lazy loading) is as follows :

public class IncrementalLoadingCollection : ObservableCollection<Words>, ISupportIncrementalLoading
{
    uint x = 1;
    public bool HasMoreItems { get { return x < 10000; } }
    public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
    {
        var page = new Index();
        string Id = localSettings.Values["Id"].ToString();
        return AsyncInfo.Run(async cancelToken =>
        {
            var apiData = await page.GetData(Id, x.ToString()); 
            foreach (var i in apiData)
            { 
                Add(new Words()
                {
                    Name = i.Name, ID=i.ID
                });
            }
            x += (uint)apiData.Count(); 
            return new LoadMoreItemsResult { Count = (uint)apiData.Count() };
        });
    }
}

public class ViewModelWords
{
    public ViewModelWords()
    {
        Items = new IncrementalLoadingCollection();
    } 
    public IncrementalLoadingCollection Items { get; set; }
}

此处提到的GetData()方法的代码在另一个类Index&中.如下:

The code for GetData() method mentioned here is in another class Index & is as follows :

public sealed partial class Index : Page
{
  List<Words> loadedList = new List<Words>();
  public class Words
  {
     public string ID { get; set; }
     public string Name { get; set; }
     public override string ToString() { return this.Name; }
  }


  public async Task<IEnumerable<Words>> GetData(string Id, string limit)
  {
     string mainUrlForWords = ApiUrl

      using (var httpClient = new HttpClient())
      {
         var dataUri = await httpClient.GetStringAsync(mainUrlForWords);
         JsonObject jsonObject = JsonObject.Parse(dataUri.ToString());
         JsonArray jsonArray = jsonObject["payload"].GetArray();
         foreach (JsonValue groupValue in jsonArray)
         {
            JsonObject groupObject = groupValue.GetObject();
            loadedList.Add(new Words { Name = groupObject.GetNamedString("name"), ID = groupObject.GetNamedString("id") });
         }
         return loadedList;
       }
   }
}

如问题中所述，我想为上述ListView实现searchBox功能，即该列表已经加载了说100个项目的项目，现在在searchBox中，我将为ListView中的项目输入匹配的任何单词/文本，它应该仅根据输入的单词/文本返回匹配的项目.

As mentioned in the question i want to implement searchBox functionality for above ListView i.e. the List is already loaded with items say 100 items, now in searchBox i will enter any word/text for the matches in items in the ListView, it should return only matched items based on word/text entered.

例如假设listview项如下:

e.g. suppose listview items are as follows :

Abbasds，Abbsdf，ABCdef，Adehf

Abbasds, Abbsdf, ABCdef, Adehf

如果我输入"ab"，则必须返回以下项目:Abbasds，Abbsdf，ABCdef

If i type 'ab' it must return following items : Abbasds, Abbsdf, ABCdef

如果我键入"Abb"必须返回:Abbasds，Abbsdf

If i type 'Abb' is must return : Abbasds, Abbsdf

我尝试使用以下代码实现上述功能:

I have tried implementing the said functionality using following code :

 <SearchBox x:Name="searchWords" QueryChanged="search_Words" PlaceholderText="Filter by..."></SearchBox>


private void search_Words(SearchBox sender, SearchBoxQueryChangedEventArgs e)
    {
        if (loadedList.Count>0)
        {
            lstWords.ItemsSource = loadedList.Where(a => a.ToString().ToUpper().Contains(searchWords.QueryText.ToUpper()));
        }
    }

但是它无法实现上述功能. 当我调试代码时，loadedList.count显示为0.而在App View上，ListView加载了&项目.可以在用户界面页面上看到.

But it fails to achieve the said functionality. When i debugged the code loadedList.count showed 0. while on App View ListView is loaded with items & can be seen on UI page.

任何人都可以解决这个问题，或者为SearchBox功能提供一些合适的解决方案吗?

Can anyone figure this out or provide some appropriate solution for the SearchBox functionality??

推荐答案

您的IncrementalLoadingCollection创建Index页面的新实例，这根本没有任何意义.

Your IncrementalLoadingCollection creates a new instance of an Index page which makes no sense at all.

我想您只是想从ListBox中获取物品:

I guess you simply want to get the items from the ListBox:

private void search_Words(SearchBox sender, SearchBoxQueryChangedEventArgs e)
{
    lstWords.ItemsSource = listBox.Items.OfType<Words>().Where(a => a.ToString().ToUpper().Contains(searchWords.QueryText.ToUpper())).ToArray();
}

这篇关于如何在UWP的增量(延迟)加载ListView中实现SearchBox功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！