WPF应用中如何实现左侧垂直菜单点击时右侧同步切换对应内容

以下是不同技术栈下的调整方法，可直接对应你的开发场景使用：

WPF 框架 #

• 给Menu根控件添加Orientation="Vertical"属性，指定整体排列方向为垂直
• 重写MenuItem的默认控件模板，修改子菜单弹出方向为右侧/下方，示例最小实现代码如下：

<Menu Orientation="Vertical" Width="180">
    <MenuItem Header="一级菜单A">
        <MenuItem Header="二级菜单A1" />
        <MenuItem Header="二级菜单A2" />
    </MenuItem>
    <MenuItem Header="一级菜单B">
        <MenuItem Header="二级菜单B1" />
    </MenuItem>
</Menu>

• 如果需要子菜单默认全部展开不折叠，可直接将MenuItem的ItemsPanel替换为垂直StackPanel，禁用Popup弹出逻辑。

WinUI / UWP 框架 #

• 优先推荐搭配NavigationView控件实现垂直侧边菜单，原生匹配目标效果，无需额外自定义MenuItem样式
• 坚持使用MenuItem的情况下，替换Menu的ItemsPanel为垂直排列布局：

<Menu>
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <MenuItem Content="菜单1" />
    <MenuItem Content="菜单2" />
</Menu>

Web前端框架（如Material UI、Ant Design） #

• 直接给Menu组件设置垂直布局属性即可，无需修改MenuItem本身：

// Material UI 示例
<Menu sx={{ flexDirection: 'column' }}>
    <MenuItem>菜单项1</MenuItem>
    <MenuItem>菜单项2</MenuItem>
</Menu>

常见问题排查 #

• 检查是否有全局样式覆盖了菜单的默认排列方向
• 子菜单弹出位置偏移时，调整Popup的Placement属性为Right或Bottom即可匹配需求
• 全展开无弹出的菜单场景可以直接用嵌套List组件替代，自定义样式成本更低

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