Binding IGrouping to a Ribbon Group

Question

I'm using the WPF ribbon control with some success; I'm trying now to use the Ribbon Gallery, making use of the Categories in a data-bound scenario. Here's some example data: -

        var data = new[]
        {
            new { Category = "Sport", Hobby = "Football" },
            new { Category = "Sport", Hobby = "Table Tennis" },
            new { Category = "Music", Hobby = "Guitar" },
            new { Category = "Music", Hobby = "Piano" },
            new { Category = "PC", Hobby = "StarCraft 2" },
        };

I'm grouping up the data and want to display the items in a gallery, grouped by Category: -

        IEnumerable CategorisedHobbies;
        CategorisedHobbies = data.GroupBy(d => d.Category).ToArray();

All fairly standard. My XAML looks as follows: -

                <ribbon:RibbonGallery ItemsSource="{Binding CategorisedHobbies}">
                    <ribbon:RibbonGallery.ItemTemplate>
                        <DataTemplate>
                            <ribbon:RibbonGalleryCategory Header="{Binding Key}" ItemsSource="{Binding}" MaxColumnCount="1">
                                <ribbon:RibbonGalleryCategory.ItemTemplate>
                                    <DataTemplate>
                                        <ribbon:RibbonGalleryItem Content="{Binding Hobby}"/>
                                    </DataTemplate>
                                </ribbon:RibbonGalleryCategory.ItemTemplate>
                            </ribbon:RibbonGalleryCategory>
                        </DataTemplate>
                    </ribbon:RibbonGallery.ItemTemplate>
                </ribbon:RibbonGallery>

However, when the app runs, whilst I correctly get the categories showing in the ribbon gallery, each item is just a blank square. I know that the collections are getting bound because I can see that the category size is bigger for e.g. Sport than PC.

If I hard-code the XAML as follows it of course all works: -

Any ideas what I'm doing wrong here? Thanks!

Answer 1

OK, I have gotten this working now "properly". What I had to do was rather than set the DataTemplate was to apply a style for the ItemsContainerStyle on the RibbonGallery.

This style simply needs to be of type RibbonGalleryCategory, and to have a property setter for the ItemsSource. In my case, it was simply {Binding}, plus I had to set the DisplayMemberPath.

I still don't have a full understanding of the hierarchy of the RibbonGallery in terms of how it styles things - but at least this approach works.

UPDATE: Here's the appropriate XAML for the code example I originally supplied:

<r:RibbonWindow.Resources>
    <Style TargetType="r:RibbonGalleryCategory" x:Key="HobbyCategoryStyle">
        <Setter Property="Header" Value="{Binding Key}"/>
        <Setter Property="ItemsSource" Value="{Binding}"/>
        <Setter Property="DisplayMemberPath" Value="Hobby"/>
    </Style>
</r:RibbonWindow.Resources>
<r:RibbonMenuButton Label="Example menu button">
   <r:RibbonGallery ItemsSource="{Binding CategorisedHobbies}" ItemContainerStyle="{StaticResource ResourceKey=HobbyCategoryStyle}"/>
</r:RibbonMenuButton>