在Windows Phone 8.1應用程序中篩選列表視圖

Question

我正在使用XAML/C＃中的Windows Phone 8.1應用程序。

我有一個列表視圖，其項目源設置爲CollectionViewSource，名爲MusicSource。在C＃的後端，我有一個ObservableCollection，調用source，下面的代碼通過獲取手機上的所有音樂文件來填充它，按藝術家對它進行分組，然後將它們放入CollectionViewSource中，這會在列表視圖中顯示它們：

var folders = await folder.GetFoldersAsync(); 
    if (folders != null) 
     foreach (var fol in folders) 
      await getMusic(fol); 

var files = await folder.GetFilesAsync(); 
foreach (var file in files) 
{ 
    MusicProperties musicProperties = await file.Properties.GetMusicPropertiesAsync(); 
    this.source.Add(new Music((musicProperties.Artist.Length > 0) ? musicProperties.Artist : "Custom", (musicProperties.Title.Length > 0) ? musicProperties.Title : file.Name, (musicProperties.Album.Length > 0) ? musicProperties.Album : "Custom Album", file.Path)); 
} 
itemSource = AlphaKeyGroup<Music>.CreateGroups(source, CultureInfo.CurrentUICulture, s => s.Artist, true); 
this.MusicSource.Source = itemSource; 

下面是它的XAML的一面：

<Page.Resources> 
    <DataTemplate x:Key="GroupTemplate"> 
     <Grid Grid.Column="1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <StackPanel Grid.Column="1"> 
       <TextBlock x:Name="SongTitle" Text="{Binding Title}" 
          Style="{ThemeResource ListViewItemTextBlockStyle}"/> 
       <TextBlock x:Name="ArtistName" Text="{Binding Album}" 
          Style="{ThemeResource ListViewItemContentTextBlockStyle}"/> 
      </StackPanel> 
     </Grid> 
    </DataTemplate> 

    <CollectionViewSource x:Name="MusicSource" IsSourceGrouped="true" /> 

    <DataTemplate x:Key="headerTemplate"> 
     <StackPanel HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=contentList}"> 
      <TextBlock Text="{Binding Key}" /> 
     </StackPanel> 
    </DataTemplate> 
</Page.Resources> 

<Grid> 
    <SemanticZoom> 
     <SemanticZoom.ZoomedInView> 
      <ListView 
       x:Name="contentList" 
       SelectionMode="Multiple" 
       ItemsSource="{Binding Source={StaticResource MusicSource}}" 
       ItemTemplate="{StaticResource GroupTemplate}"> 
       <ListView.GroupStyle> 
        <GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource headerTemplate}"/> 
       </ListView.GroupStyle> 
      </ListView> 
     </SemanticZoom.ZoomedInView> 
    </SemanticZoom> 
    <Border 
     x:Name="SearchBorder" 
     Background="White"> 
     <TextBox 
       x:Name="Search" TextChanged="TextBox_TextChanged" /> 
    </Border> 
</Grid> 

所以我得到的東西就像在ListView以下幾點：

邁克爾·傑克遜

• 壞
• 危險
• 驚悚
• 怪物

阿姆

• 不怕
• 怪物

當用戶鍵入搜索文本框時，應該過濾列表視圖並僅顯示與搜索文本框中的文本匹配的項目。因此，例如，如果我在搜索框中輸入「Monster」，則立即過濾列表視圖，並且只在「Michael Jackson」組頭中顯示「Monster」，在「Eminem」組頭中顯示「Monster」。

我該怎麼做到這一點？

Answer 1

我對Windows 8 Store應用程序有類似的任務 - 當用戶鍵入示例文本時，對分組列表視圖進行實時篩選。我製作了一個保存FilterText和Groups的視圖模型。組有兩個可觀察的集合 - AllItems（項目的完整列表）和Items（在屏幕上可見）。當FilterText被更改時，我正在瀏覽每個組中的每個項目，並確定是否將它保留在Items中。以下是一些代碼：

... 

var rule = x => GetTextToFilter(x).IndexOf(filterText, 
       StringComparison.CurrentCultureIgnoreCase) >= 0; 

foreach (var group in Groups) 
{ 
    group.UpdateVisibleItems(rule); 
} 

... 

void UpdateVisibleItems(Func<ItemViewModel, bool> rule) 
{ 
    for (int i = 0, j = 0; i < AllItems.Count; i++) 
    { 
     var item = AllItems[i]; 
     if (rule(item)) 
     { 
      if (j == _Items.Count || (j < _Items.Count && _Items[j] != item)) 
      { 
       _Items.Insert(j, item); 
      } 

      j++; 
     } 
     else 
     { 
      if (j < _Items.Count && _Items[j] == item) 
      { 
       _Items.RemoveAt(j); 
      } 
     } 
    } 
} 

如果項目在過濾後仍然可見，則此方式選擇保持不變。動畫看起來是正確的，因爲系統將其視爲可觀察集合上的一系列插入/刪除（完整列表刷新將使整個列表被刪除並恢復，這將導致動畫錯誤）。

它的偉大工程（前提是AllItems不是數百萬行），但我打奇怪的例外，在特定情況 - （或全部）時ListView.GroupStyle.HidesIfEmpty=True和某些羣體在更新的過程中清理 - 過程中崩潰Windows.UI.Xaml.dll。沒有異常被困在C＃代碼中（UnhandledException和TaskScheduler.UnobservedTaskException是無聲的）。在事件日誌中沒有可用的。調試器無法顯示詳細信息，甚至無法附加到失敗的進程。如果我添加await Task.Delay()它會更穩定，但仍可能會不時失敗。如果我設置ListView.GroupStyle.HidesIfEmpty=False - 所有工作穩定！

Answer 2

嗯，它看起來並不難，所有你需要做的是首先製作你的歌曲列表，然後在它的項目中搜索並製作不需要的項目COLLAPSED！ 爲便於工作使用listview控件並在其項目中搜索。 請注意，首先你必須製作母控件中所有列表視圖控件的緩存以供將來搜索，以避免再次獲取所有音樂並且禁用搜索模式。