Home/ Questions/Q 3608152
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:27:57+00:00

I’m using the WPF ribbon control with some success; I’m trying now to use

  • 0

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.

alt text

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

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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