eine beobachtbare Sammlung für semantischen Zoom filtern

Question

Ich habe eine beobachtbare Sammlung, die aus einer SQLite-Datenbank gefüllt ist, die Daten werden dann in einer Listenansicht angezeigt. Ich möchte dies in eine semantische Ansicht mit Kopfzeilen ändern. Wie gruppiere ich die Objekte in der Sammlung?

XAML Seite

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

beobachtbare Sammlung

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

Um eine beobachtbare Sammlung für semantischen Zoom Goup, können wir CollectionViewSource als Datenquelle verwenden. Verwenden Sie dann die Gruppierungs-LINQ-Abfrage, um CollectionViewSource.Source Eigenschaft wie in my previous answer festzulegen.

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; 

Sobald wir die CollectionViewSource setzen, können wir es dann als ItemsSource von GridView verwenden oder ListView Gruppierung zu unterstützen. Für weitere Informationen über SemanticZoom, siehe Semantic zoom, Quickstart: adding SemanticZoom controls (XAML) und auch die UI basics (XAML) sample auf GitHub.