Binding into a tape group

Question

I use the WPF ribbon control with some success; Now I'm trying to use the feed gallery using categories in a data-bound script. Here are some sample 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 am grouping data and want to display items in the gallery, grouped by category:

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

Everything is pretty standard. My XAML is 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 application starts, while I correctly get the categories displayed in the feed gallery, each element is just an empty square. I know that collections are related because I see that the size of the category is larger, for example. Sport than PC.

If I program hard XAML, like this, of course, everything works: -

        

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

Answer 1

, "". , , DataTemplate, ItemsContainerStyle .

RibbonGalleryCategory setter ItemsSource. {Binding}, DisplayMemberPath.

RibbonGallery , , .

UPDATE: XAML , :

<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

, , ItemsPanel to RibbonGalleryCategory, :

<ribbon:RibbonGalleryCategory.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel IsItemsHost="True" />
    </ItemsPanelTemplate>
</ribbon:RibbonGalleryCategory.ItemsPanel>