如何在WPF中创建三级垂直侧边菜单？

我正尝试创建多级侧边菜单（包含三级菜单，如version1、version2这类层级），菜单绑定到MenuItemModel类的ObservableCollection<MenuItemModel>（MenuList），数据模型定义如下：

public class MenuItemModel
{
    public int MenuID { get; set; }
    public string MenuName { get; set; }          
    public ObservableCollection<MenuItemModel> SubMenuList { get; set; }
}

我当前的XAML代码能实现二级菜单，但不知道如何扩展到三级：

<ItemsControl ItemsSource="{Binding MenuList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <RadioButton x:Name="Menu"
                             Tag="{Binding MenuID}"
                             GroupName="MainMenu"                                 
                             Style="{StaticResource MenuButtonStyle}"
                             Content="{Binding MenuName}"
                             Height="30"/>
                <ListBox x:Name="SubMenu" ItemsSource="{Binding SubMenuList}"/>                   
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

请问能否在不修改数据模型的前提下通过XAML实现三级（甚至更多级）菜单？

完全可以在不修改数据模型的前提下实现，因为你的MenuItemModel本身已经是递归结构（SubMenuList是同类型的集合），只需要用递归数据模板来实现层级嵌套即可，以下是两种常用实现方式：

方式一：使用HierarchicalDataTemplate（推荐） #

WPF的HierarchicalDataTemplate专门用于展示层级数据，它可以指定子项的数据源和模板，天然支持递归：

<ItemsControl ItemsSource="{Binding MenuList}">
    <ItemsControl.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubMenuList}">
            <RadioButton Tag="{Binding MenuID}"
                         GroupName="MainMenu"                                 
                         Style="{StaticResource MenuButtonStyle}"
                         Content="{Binding MenuName}"
                         Height="30"/>
            <!-- 子项会自动复用当前HierarchicalDataTemplate，实现无限级嵌套 -->
        </HierarchicalDataTemplate>
    </ItemsControl.ItemTemplate>
    <!-- 可选：设置子菜单布局容器，或通过Margin给子项添加缩进区分层级 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

方式二：递归引用命名DataTemplate #

通过给DataTemplate设置x:Key，然后在子项的ItemsControl里引用这个模板，实现递归嵌套：

<Window.Resources>
    <DataTemplate x:Key="MenuItemTemplate">
        <StackPanel>
            <RadioButton Tag="{Binding MenuID}"
                         GroupName="MainMenu"                                 
                         Style="{StaticResource MenuButtonStyle}"
                         Content="{Binding MenuName}"
                         Height="30"/>
            <!-- 子菜单引用同一个模板，通过Margin缩进区分层级 -->
            <ItemsControl ItemsSource="{Binding SubMenuList}"
                          ItemTemplate="{StaticResource MenuItemTemplate}"
                          Margin="20,0,0,0"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<ItemsControl ItemsSource="{Binding MenuList}"
              ItemTemplate="{StaticResource MenuItemTemplate}"/>

这种方式更灵活，可根据层级自定义缩进、样式等细节，完全适配多级菜单需求。

两种方式都不需要修改现有数据模型，因为模型本身已经支持无限层级的子菜单结构。

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