Привязка IGroup к группе лент

Question

Я использую ленточный элемент управления WPF с некоторым успехом; Сейчас я пытаюсь использовать Ribbon Gallery, используя Категории в сценарии с привязкой к данным. Вот некоторые примеры данных: -

        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" },
        };

Я группирую данные и хочу отобразить элементы в галерее, сгруппированной по категориям: -

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

Все довольно стандартно. Мой XAML выглядит следующим образом: -

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

Однако, когда приложение запускается, хотя я правильно получаю категории, отображаемые в ленточной галерее, каждый элемент представляет собой пустой квадрат. Я знаю, что коллекции становятся связанными, потому что я вижу, что размер категории больше, например. Спорт, чем компьютер.

Если я жестко закодирую XAML следующим образом, то, конечно, все работает: -

Есть идеи, что я здесь делаю не так? Спасибо!

Answer 1

ОК, теперь я все заработал "правильно". Вместо того, чтобы установить DataTemplate, мне нужно было применить стиль для ItemsContainerStyle в RibbonGallery.

Этот стиль просто должен иметь тип RibbonGalleryCategory и иметь установщик свойства для 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 для RibbonGalleryCategory, это работает:

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