如何在增量(延迟)加载的 UWP 列表视图中实现搜索框功能

Question

>我在 UWP 应用程序中有一个 ListView，它在第一次加载时绑定 100 个项目，然后在加载完成后它绑定另一个 100 个项目，即它是增量加载的。

这是一个代码：

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

将此列表视图与增量加载(延迟加载(绑定的代码如下：

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 中，如下所示：

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 中的项目中输入匹配的任何单词/文本，它应该仅返回匹配的项目基于输入的单词/文本。

例如，假设列表视图项目如下：

Abbasds， Abbsdf， ABCdef， Adehf

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

如果我输入"Abb"必须返回：Abbasds，Abbsdf

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

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

但它无法实现上述功能。 当我调试代码时，加载列表.计数显示 0。而在应用程序视图上，列表视图加载了项目，可以在UI页面上看到。

任何人都可以弄清楚这一点或为 SearchBox 功能提供一些合适的解决方案吗？

Answer 1

您的IncrementalLoadingCollection会创建一个Index页面的新实例，这根本没有意义。

我猜你只是想从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();
}