how to create gridview from dictionary

Question

I have a dictionary where key is a String and element is a List

I want to create a group from every key with elements from element. But I don`t know how to make it

<Page.Resources>
    <!--
        Collection of grouped items displayed by this page, bound to a subset
        of the complete item list because items in groups cannot be virtualized
    -->
    <CollectionViewSource
        x:Name="groupedItemsViewSource"
        IsSourceGrouped="true"
        />

</Page.Resources>

<GridView ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
      IsSwipeEnabled="True">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding name}"
           Foreground="White" />
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
<TextBlock Text="Test 123" Foreground="Gold" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>

In loop I create the dictionary

groups.Add(this.letters[i], items);

and after that I have

groupedItemsViewSource.Source = groups;

But I get nothing. How should I correct this to have a key as group title and every list as a list of elements in this grid ??

// EDIT

Ok I found that making List> instead of Dictionary is better. I get now 3 group headers (cause I got 3 lists in my list) but have no items. IMO this is better way than the first

// EDIT 2 I didn`t see items cause background and foreground were white. Stupid me :) But now I have last problem to solve. How to dynamicly set groups titles ?

Answer 1

Dictionary doesn't implement INotifyPropertyChanged or INotifyCollectionChanged which is required if you want your binding work

public class yourclass
{
    public string Key { get; set; }
    public int Value { get; set; }
}


ObservableCollection<yourclass> dict = new ObservableCollection<MyCustomClass>();
dict.Add(new yourclass{Key = "yourkey", Value = whatyouwant});
dict.Add(new yourclass{ Key = "yourkey2", Value = whatyouwant });

Answer 2

You actually don't have to create custom classes to enable grouping. In fact you can use LINQ to do it for you:

var result = from act in Activities group act by act.Project into grp orderby grp.Key select grp;

cvsActivities.Source = result;

In order to show grouped items in a GridView you must use CollectionViewSource. Just setting the groups as the GridView.ItemsSource will not work. You must set GridView.ItemsSource = a CollectionViewSource and CollectionViewSource must point to the groups. You will also likely have to set CollectionViewSource.IsSourceGrouped = true.