Comment puis-je lier une ObservableCollection des ViewModels à un MenuItem?

J'ai trouvé en utilisant MVVM avec MenuItems être très difficile. Le reste de mon application utilise DataTemplates pour lier la Vue avec le ViewModel, mais qui ne semble tout simplement pas travailler avec des Menus en raison de précisément les raisons que vous avez décrit. Voici comment j'ai finalement résolu. Mon point de Vue, ressemble à ceci:

<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>

Si vous remarquez, j'ai défini une interface appelée IMenuItem, qui est le ViewModel pour un MenuItem. Voici le code pour que:

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; }
}

Avis que le IMenuItem définit IEnumerable, ce qui est la façon dont vous obtenez les sous-menus. Aussi, le IsSeparator est un moyen de définir des séparateurs dans le menu (une autre difficile petit truc). Vous pouvez voir dans le code xaml comment il utilise un DataTrigger de changer le style de l'existant séparateur de style si IsSeparator est vrai. Voici comment MainViewModel définit le MainMenu propriété (que la vue se lie à l'):

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

Cela semble bien fonctionner. Je suppose que vous pourriez utiliser une ObservableCollection pour le MainMenu. Je suis en fait à l'aide de la MEF pour composer le menu de pièces, mais après que les éléments eux-mêmes sont statiques (même si les propriétés de chaque élément de menu ne sont pas). J'utilise aussi un AbstractMenuItem classe qui implémente IMenuItem et est d'une aide de la classe à instancier les éléments de menu dans les différentes parties.

Mise à JOUR:

Concernant votre problème de couleur, ne ce fil aider?

OriginalL'auteur Scott Whitlock

Voici comment j'ai fait mes menus. Il peut ne pas être exactement ce dont vous avez besoin, mais je pense que c'est assez proche.

  <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 est une collection de menus qui apparaissent sur la barre de menu. Ils contiennent chacun l'MenuName qui sera affiché et une collection appelée SubMenuItems que je me suis mis à la ItemsSource.

Je contrôle la façon dont le SubMenuItems sont affichés par le style SumMenuItemStyle. Chaque SubMenuItem a son propre MenuName propriété, propriétés de Commande de type ICommand, et éventuellement une autre collection de SubMenuItems.

Le résultat est que je suis capable de stocker tout mon menu de l'information dans une base de données et de passer dynamiquement les menus sont affichés lors de l'exécution. L'ensemble de la menuitem zone est cliquable et s'affiche correctement.

Espère que cette aide.

OriginalL'auteur RB Davidson