当我使用ObservableCollection绑定菜单项时,只能点击MenuItem的"内部"区域:

alt text http://tanguay.info/web/external/mvvmMenuItems.png

在我的视图中我有这个菜单:

<Menu>
    <MenuItem 
        Header="Options" ItemsSource="{Binding ManageMenuPageItemViewModels}"
              ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>

然后我用这个DataTemplate绑定它:

<DataTemplate x:Key="MainMenuTemplate">
    <MenuItem
        Header="{Binding Title}" 
        Command="{Binding DataContext.SwitchPageCommand,
        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}" 
        Background="Red"
        CommandParameter="{Binding IdCode}"/>
</DataTemplate>

由于ObservableCollection ManageMenuPageItemViewModels中的每个ViewModel 都有一个属性Title和IdCode,因此上面的代码一见即可.

但是,问题是DataTemplate 中的MenuItem实际上在另一个MenuItem中(就像它被绑定两次一样),因此在上面的DataTemplate中,Background ="Red",每个菜单项中都有一个Red框,只有这个区域可以单击,而不是整个菜单项区域本身(例如,如果用户点击复选标记所在的区域或内部可点击区域的右侧或左侧,则没有任何反应,如果您没有单独的颜色很混乱.)

将MenuItems绑定到ViewModel的ObservableCollection的正确方法是什么,以便每个MenuItem中的整个区域都是可点击的？

更新:

所以我根据下面的建议进行了以下更改,现在有了这个:

alt text http://tanguay.info/web/external/mvvmMenuItemsYellow.png

我只有我的DataTemplate中TextBlock的,但我还是不能"色全菜单项",但只是将TextBlock:

<DataTemplate x:Key="MainMenuTemplate">
    <TextBlock Text="{Binding Title}"/>
</DataTemplate>

我将Command绑定到Menu.ItemContainerStyle,但它们现在不会触发:

<Menu DockPanel.Dock="Top">
    <Menu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Background" Value="Yellow"/>
            <Setter …