Как я могу привязать ObservableCollection ViewModels к MenuItem?

Когда я связываю пункты меню с ObservableCollection, кликабельна только "внутренняя" область MenuItem:

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>

Поскольку каждая ViewModel в ObservableCollection ManageMenuPageItemViewModels имеет свойство Title и IdCode, приведенный выше код работает с первого взгляда.

ОДНАКО проблема заключается в том, что MenuItem в DataTemplate фактически находится внутри другого MenuItem (как если бы он был связан дважды), так что в вышеупомянутом DataTemplate с Background="Red" внутри каждого пункта меню есть красное поле и только эта область можно щелкнуть, а не всю область элемента меню (например, если пользователь нажимает на область, где находится флажок, или справа или слева от внутренней области с возможностью нажатия, то ничего не происходит, что, если у вас нет отдельной цвет очень запутанный.)

Как правильно связать MenuItems с ObservableCollection ViewModels, чтобы вся область внутри каждого MenuItem была интерактивной?

ОБНОВИТЬ:

Поэтому я сделал следующие изменения, основываясь на приведенных ниже советах, и теперь имею следующее:

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

У меня есть только TextBlock внутри моего DataTemplate, но я все еще не могу "покрасить весь MenuItem", но только 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 Property="Command" Value="{Binding DataContext.SwitchPageCommand,
        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}"/>
            <Setter Property="CommandParameter" Value="{Binding IdCode}"/>
        </Style>
    </Menu.ItemContainerStyle>
    <MenuItem 
        Header="MVVM" ItemsSource="{Binding MvvmMenuPageItemViewModels}"
              ItemTemplate="{StaticResource MainMenuTemplate}"/>
    <MenuItem 
        Header="Application" ItemsSource="{Binding ApplicationMenuPageItemViewModels}"
              ItemTemplate="{StaticResource MainMenuTemplate}"/>
    <MenuItem 
        Header="Manage" ItemsSource="{Binding ManageMenuPageItemViewModels}"
              ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>
Источник

4 ответа

Решение

Использование MVVM с MenuItems показалось мне очень сложным. Остальная часть моего приложения использует DataTemplates для сопряжения View с ViewModel, но, похоже, это не работает с Menus по точным причинам, которые вы описали. Вот как я в конце концов решил это. Мой взгляд выглядит так:

<DockPanel>
<Menu DockPanel.Dock="Top" ItemsSource="{Binding Path=(local:MainViewModel.MainMenu)}">
    <Menu.ItemContainerStyle>
        <Style>
            <Setter Property="MenuItem.Header" Value="{Binding Path=(contracts:IMenuItem.Header)}"/>
            <Setter Property="MenuItem.ItemsSource" Value="{Binding Path=(contracts:IMenuItem.Items)}"/>
            <Setter Property="MenuItem.Icon" Value="{Binding Path=(contracts:IMenuItem.Icon)}"/>
            <Setter Property="MenuItem.IsCheckable" Value="{Binding Path=(contracts:IMenuItem.IsCheckable)}"/>
            <Setter Property="MenuItem.IsChecked" Value="{Binding Path=(contracts:IMenuItem.IsChecked)}"/>
            <Setter Property="MenuItem.Command" Value="{Binding}"/>
            <Setter Property="MenuItem.Visibility" Value="{Binding Path=(contracts:IMenuItem.Visible), 
                Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <Setter Property="MenuItem.ToolTip" Value="{Binding Path=(contracts:IMenuItem.ToolTip)}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=(contracts:IMenuItem.IsSeparator)}" Value="true">
                    <Setter Property="MenuItem.Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type MenuItem}">
                                <Separator Style="{DynamicResource {x:Static MenuItem.SeparatorStyleKey}}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Menu.ItemContainerStyle>
</Menu>
</DockPanel>

Если вы заметили, я определил интерфейс IMenuItem, который является ViewModel для MenuItem. Вот код для этого:

public interface IMenuItem : ICommand
{
    string Header { get; }
    IEnumerable<IMenuItem> Items { get; }
    object Icon { get; }
    bool IsCheckable { get; }
    bool IsChecked { get; set; }
    bool Visible { get; }
    bool IsSeparator { get; }
    string ToolTip { get; }
}

Обратите внимание, что IMenuItem определяет элементы IEnumerable, и именно так вы получаете подменю. Кроме того, IsSeparator - это способ определения разделителей в меню (еще один сложный трюк). В xaml вы можете увидеть, как он использует DataTrigger для изменения стиля на существующий стиль разделителя, если IsSeparator имеет значение true. Вот как MainViewModel определяет свойство MainMenu (с которым связывается представление):

public IEnumerable<IMenuItem> MainMenu { get; set; }

Кажется, это хорошо работает. Я предполагаю, что вы могли бы использовать ObservableCollection для MainMenu. Я на самом деле использую MEF для составления меню из частей, но после этого сами элементы статичны (хотя свойства каждого пункта меню нет). Я также использую класс AbstractMenuItem, который реализует IMenuItem и является вспомогательным классом для создания экземпляров пунктов меню в различных частях.

ОБНОВИТЬ:

Относительно вашей цветовой проблемы, эта нить помогает?

Источник

Не кладите MenuItem в DataTemplate, DataTemplate defines the content of the MenuItem, Instead, specify extraneous properties for the MenuItem через ItemContainerStyle:

<Menu>
    <Menu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Title}"/>
            ...
        </Style>
    </Menu.ItemContainerStyle>
    <MenuItem 
        Header="Options" ItemsSource="{Binding ManageMenuPageItemViewModels}"
              ItemTemplate="{StaticResource MainMenuTemplate}"/>
</Menu>

Кроме того, взгляните на HierarchicalDataTemplates.

Источник

Просто сделайте свой DataTemplate как TextBlock (или, возможно, панель стека со значком и TextBlock).

Источник

Вот как я сделал мои меню. Это может быть не совсем то, что вам нужно, но я думаю, что это довольно близко.

  <Style x:Key="SubmenuItemStyle" TargetType="MenuItem">
    <Setter Property="Header" Value="{Binding MenuName}"></Setter>
    <Setter Property="Command" Value="{Binding Path=MenuCommand}"/>
    <Setter Property="ItemsSource" Value="{Binding SubmenuItems}"></Setter>
  </Style>

  <DataTemplate DataType="{x:Type systemVM:TopMenuViewModel}" >
    <Menu>
      <MenuItem Header="{Binding MenuName}"         
                    ItemsSource="{Binding SubmenuItems}" 
                    ItemContainerStyle="{DynamicResource SubmenuItemStyle}" />
    </Menu>
  </DataTemplate>

    <Menu DockPanel.Dock="Top" ItemsSource="{Binding Menus}" />

TopMenuViewModel представляет собой набор меню, которые появятся в строке меню. Каждый из них содержит MenuName, которое будет отображаться, и коллекцию под названием SubMenuItems, которую я установил в качестве ItemsSource.

Я контролирую способ отображения SubMenuItems с помощью стиля SumMenuItemStyle. Каждый SubMenuItem имеет свое собственное свойство MenuName, свойство Command типа ICommand и, возможно, другую коллекцию SubMenuItems.

В результате я могу хранить всю информацию о моем меню в базе данных и динамически переключать то, что меню отображаются во время выполнения. Вся область меню является интерактивной и отображается правильно.

Надеюсь это поможет.

Источник
Другие вопросы по тегам