如何在WPF中将ObservableCollection绑定为扁平结构的MenuItem？

问题描述 #

我已经尝试解决这个问题好几天了，一直卡壳。想在WPF里把Categories集合绑定到Menu，以扁平列表的形式展示每个分类下的所有项，请问怎么用Menu/MenuItem实现？我试过ItemContainerStyle、DataContext这些方法，但效果都不好。作为WPF新手，我求助大家，这看起来应该是个简单的实现。目标效果如图所示，以下是我的C#代码：

C#代码 #

public class DisplayPreset
{
    public string Name { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
}

public class DisplayCategory
{
    public string Name { get; set; }
    public ObservableCollection<DisplayPreset> Presets { get; set; }
}

// ViewModel中的属性（需确保ViewModel实现INotifyPropertyChanged）
public ObservableCollection<DisplayCategory> DisplayCategories { get; set; } = new ObservableCollection<DisplayCategory>
{
    new DisplayCategory
    {
        Name = "HD 16:9",
        Presets = new ObservableCollection<DisplayPreset>
        {
            new DisplayPreset { Name = "1280 x 720", Width = 1280, Height = 720 },
            new DisplayPreset { Name = "1920 x 1080", Width = 1920, Height = 1080 },
        }
    },
    new DisplayCategory
    {
        Name = "Square 1:1",
        Presets = new ObservableCollection<DisplayPreset>
        {
            new DisplayPreset { Name = "100 x 100", Width = 100, Height = 100 },
            new DisplayPreset { Name = "200 x 200", Width = 200, Height = 200 },
        }
    }
};

当前硬编码的XAML #

<Menu Grid.Column="3" DataContext="{StaticResource ViewModel}">
    <MenuItem >
        <MenuItem.Header>
            <StackPanel Orientation="Horizontal">
                <Path Style="{StaticResource Icons.ChevronDown}" Margin="0,0,0,0"/>
            </StackPanel>
        </MenuItem.Header>

        <MenuItem Header="HD 16:9" IsEnabled="False" FontWeight="SemiBold"></MenuItem>
        <MenuItem Header="1280 x 720" />
        <MenuItem Header="1920 x 1080" />

        <MenuItem Header="Square 1:1" IsEnabled="False" FontWeight="SemiBold"></MenuItem>
        <MenuItem Header="100 x 100" />
        <MenuItem Header="200 x 200" />
    </MenuItem>
</Menu>

解决方案 #

要实现扁平展示的Menu，我们可以通过嵌套绑定+数据模板+样式来完成，直接利用CompositeCollection合并分类标题与预设项，实现无层级的展示效果：

修改后的完整XAML #

<Menu Grid.Column="3" DataContext="{StaticResource ViewModel}">
    <MenuItem>
        <MenuItem.Header>
            <StackPanel Orientation="Horizontal">
                <Path Style="{StaticResource Icons.ChevronDown}" Margin="0,0,0,0"/>
            </StackPanel>
        </MenuItem.Header>
        <!-- 绑定分类集合并合并扁平项 -->
        <MenuItem.ItemsSource>
            <CompositeCollection>
                <CollectionContainer Collection="{Binding DisplayCategories}">
                    <CollectionContainer.ItemTemplate>
                        <DataTemplate>
                            <CompositeCollection>
                                <!-- 分类标题项：禁用、加粗 -->
                                <MenuItem Header="{Binding Name}" 
                                          IsEnabled="False" 
                                          FontWeight="SemiBold"/>
                                <!-- 分类下的预设项：可点击 -->
                                <CollectionContainer Collection="{Binding Presets}">
                                    <CollectionContainer.ItemTemplate>
                                        <DataTemplate>
                                            <MenuItem Header="{Binding Name}"/>
                                        </DataTemplate>
                                    </CollectionContainer.ItemTemplate>
                                </CollectionContainer>
                            </CompositeCollection>
                        </DataTemplate>
                    </CollectionContainer.ItemTemplate>
                </CollectionContainer>
            </CompositeCollection>
        </MenuItem.ItemsSource>
    </MenuItem>
</Menu>

关键说明 #

1. CompositeCollection：负责将每个分类的标题和其下的所有预设项合并成扁平列表，消除层级结构。
2. 嵌套绑定：外层绑定DisplayCategories遍历所有分类，内层针对单个分类绑定Presets集合，自动展开所有项。
3. 样式区分：分类标题设置为禁用、加粗，和可点击的预设项形成明确视觉区分，完全匹配你硬编码的效果。
4. ViewModel要求：确保ViewModel实现INotifyPropertyChanged接口，保证数据更新时UI同步；DisplayCategories必须是公共属性，否则绑定无法识别。

如果觉得上述写法繁琐，也可以提前在ViewModel中将数据扁平化：创建一个object类型的集合，依次添加DisplayCategory和DisplayPreset对象，再用DataTemplateSelector区分不同类型的模板，XAML会更简洁。

内容的提问来源于stack exchange，提问作者JokerMartini