gouping an observable collection for semantic zoom

Question

I have an observable collection which is populated from an SQLite database, the data is then displayed in a list view. I want to change this to a semantic view with headers, How do I group the objects inside the collection?

XAML Page

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

Observable Collection

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

    }

Do you mean like [this](http://stackoverflow.com/questions/38905921/listview-keep-listviewheaderitem-on-top)? — AVK, Sep 16 '16 at 16:01

score 0 · Answer 1 · edited May 23 '17 at 12:19

To goup an observable collection for semantic zoom, we can use CollectionViewSource as the data source. And then use grouping LINQ query to set CollectionViewSource.Source property like what in 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;

Once we set the CollectionViewSource, we can then use it as ItemsSource of GridView or ListView to support grouping. For more info about SemanticZoom, please see Semantic zoom, Quickstart: adding SemanticZoom controls (XAML) and also the UI basics (XAML) sample on GitHub.

gouping an observable collection for semantic zoom

1 Answers1