Binding IGrouping to a Ribbon Group - wpf

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>

Answer 2

Not sure why but if you assign an ItemsPanel to RibbonGalleryCategory, it works:
<ribbon:RibbonGalleryCategory.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ribbon:RibbonGalleryCategory.ItemsPanel>