意味論的ズームのために観察可能なコレクションを集める

Question

私はSQLiteデータベースから読み込まれた観察可能なコレクションを持っており、データはリストビューで表示されます。これをヘッダ付きのセマンティックビューに変更したいのですが、コレクション内のオブジェクトをどのようにグループ化するのですか？

XAMLページ

<Page.Resources> 
    <vm:IngredientsCollection x:Key="Ingredient"/> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <uwp:SwipeListView x:Name="IngredientList" ItemClick="ItemClicked" LayoutUpdated="ListUpdated" ItemsSource="{StaticResource Ingredient}" IsItemClickEnabled="True" SelectionMode="Single" ItemSwipe="ItemSwipe" ItemLeftBackground="#FF007575" KeyDown="DeleteKeyPressed" IsTabStop="True" Margin="0,0,0,-1"> 
       <uwp:SwipeListView.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <StackPanel Orientation="Vertical" HorizontalAlignment="Left"> 
           <TextBlock Text="{Binding IngredientName}" FontSize="18" Margin="12,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/> 
           <TextBlock Text="{Binding IngredientCategory.CategoryName}" FontSize="16" Margin="12,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" /> 
          </StackPanel> 
         </Grid> 
        </DataTemplate> 
       </uwp:SwipeListView.ItemTemplate> 
     <uwp:SwipeListView.ItemContainerStyle> 
      <Style TargetType="uwp:SwipeListViewItem"> 
       <Setter Property="Height" Value="80"/> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
       <Setter Property="Padding" Value="0"/> 
       <Setter Property="BorderThickness" Value="0,0,0,1"/> 
       <Setter Property="BorderBrush" Value="#FF007575"/> 
      </Style> 
     </uwp:SwipeListView.ItemContainerStyle> 
    </uwp:SwipeListView> 
</Grid> 

セマンティックズームのために監視可能なコレクションをgoupするために監視可能なコレクション

public class IngredientsCollection : ObservableCollection<Ingredient> 
{ 

    public IngredientsCollection() 

     : base() 
    { 
     var db = new SQLiteConnection(new SQLitePlatformWinRT(), App.path); 
     var Ingredients = new List<Ingredient>(); 
     Ingredients = db.GetAllWithChildren<Ingredient>().ToList(); 


     foreach (var Ingredient in Ingredients) 
     { 
      Add(Ingredient); 
     } 

    } 

Answer 1

、我々は、データソースとしてCollectionViewSourceを使用することができます。グループ化のLINQクエリを使用してCollectionViewSource.Sourceのプロパティをmy previous answerのように設定します。

List<TestDemo> list = new List<TestDemo>(); 

for (int i = 0; i < 6; i++) 
{ 
    list.Add(new TestDemo { Key = "A", Text = $"Test A {i}" }); 
    list.Add(new TestDemo { Key = "B", Text = $"Test B {i}" }); 
} 

var result = from t in list group t by t.Key; 

groupInfoCVS.Source = result; 

我々はCollectionViewSourceを設定すると、私たちはその後、グループ化をサポートするためにGridViewのItemsSourceまたはListViewとして使用することができます。 SemanticZoomの詳細については、Semantic zoom,Quickstart: adding SemanticZoom controls (XAML)およびGitHubのUI basics (XAML) sampleを参照してください。