动态绑定到 Window 的 MenuItem 上的 ViewModel 命令

Question

使用 MVVM 结构开发 WPF 应用程序。

我的窗口显示菜单和当前的 ViewModel。在菜单的 MenuItem 之一上，我想列出当前 ViewModel 中找到的一些命令。菜单中列出的命令将根据 ViewModel 的不同而变化。

我让它工作得很好，但样式很混乱 - 命令菜单项位于另一个菜单框或其他东西内。我将附上屏幕截图。

我将 ViewModel 的 ICommand 对象（在本例中为 RelayCommands）包装在 CommandViewModel 中，它公开了我想要在菜单上显示的命令和显示字符串。这些 CommandViewModel 位于列表中：CurrentWorkspace.AdditionalOptionsCommands。

这是菜单的 XAML。就像我说的，它有效，它显示了正确的项目并且命令被执行。显示不正确 - 谁能告诉我原因以及如何修复它？请参阅屏幕截图。

<Menu>
    <MenuItem Header="_Additional Options..." ItemsSource="{Binding Path=CurrentWorkspace.AdditionalOptionsCommands}">
        <MenuItem.ItemTemplate>
            <DataTemplate DataType="{x:Type vm:CommandViewModel}">
                <MenuItem Header="{Binding Path=DisplayText}" Command="{Binding Path=Command}"/>
            </DataTemplate>
        </MenuItem.ItemTemplate>
    </MenuItem>
    <MenuItem Header="_Testing">
        <MenuItem Header="This looks right" />
        <MenuItem Header="This looks right" />
    </MenuItem>   
</Menu>  

当前外观：

所需外观：

Answer 1

这是因为当您通过 ItemsSource 指定菜单项时，每个项目都会自动包装到 MenuItem 对象中。这样，DataTemplate（MenuItem 元素）中定义的内容将被包装到另一个 MenuItem 中。

您需要做的不是定义 DataTemplate ，而是为 MenuItem 定义一种样式，在其中设置与视图模型属性的绑定，并将该样式用作 ItemContainerStyle父 MenuItem 上的：

<Window.Resources>
    <Style x:Key="CommandMenuItemStyle"
           TargetType="{x:Type MenuItem}">
         <Setter Property="Header"
                 Value="{Binding Path=DisplayText}"/> 
         <Setter Property="Command"
                 Value="{Binding Path=Command}"/>
    </Style>
</Window.Resources>
...
<Menu>
    <MenuItem Header="_Additional Options..." 
              ItemsSource="{Binding Path=CurrentWorkspace.AdditionalOptionsCommands}" 
              ItemContainerStyle="{StaticResource CommandMenuItemStyle}"/>
    <MenuItem Header="_Testing">
        <MenuItem Header="This looks right" />
        <MenuItem Header="This looks right" />
    </MenuItem>   
</Menu>   

请参阅 http://drwpf.com/blog/2008/03/25/itemscontrol -i-is-for-item-container/ 有关项目容器如何与 ItemsControl 控件配合使用的深入说明。