Question

I am building an WPF application trying to stick closely to MVVM principles. I am having a problem getting the menu to render correctly. I’ve tried a few approaches and am getting stuck. It seems like my binding is correct, but I’m not sure about my styles manipulation.

Here’s the code I have the problem with. Like I said, it seems the binding is good, and I can even see the correct values for the Header menu items using Snoop, but all I see rendered is empty containers for menu items.

 <DockPanel>
        <DockPanel.Resources>
            <HierarchicalDataTemplate x:Key="TopMenuHDT" ItemsSource="{Binding Children}">
                <HierarchicalDataTemplate.ItemContainerStyle>
                    <Style TargetType="{x:Type MenuItem}">
                        <Setter Property="Command" Value="{Binding Command}" />
                        <Setter Property="Header" Value="{Binding MenuText}" />
                        <Setter Property="Icon">
                            <Setter.Value>
                                <Image Source="{Binding MenuIcon}" Height="16px" Width="16px" />
                            </Setter.Value>
                        </Setter>
                    </Style>
                </HierarchicalDataTemplate.ItemContainerStyle>
            </HierarchicalDataTemplate>

        </DockPanel.Resources>
        <Menu DockPanel.Dock="Top" Height="auto"
              ItemsSource="{Binding TopMenuItems}" 
              ItemTemplate="{StaticResource TopMenuHDT}"/>

In my main ViewModel:

    private ObservableCollection<MenuViewModel> _topMenuItems;
    public ObservableCollection<MenuViewModel> TopMenuItems
    {
        get { return _topMenuItems; }
        set
        {
            if (_topMenuItems == value)
                return;

            _topMenuItems = value; base.RaisePropertyChanged("TopMenuItems");
        }
    }
...
    public void LoadMainMenu()
    {
        IList<ViewModels.MenuViewModel> fileMenuItems = PopulateFileMenuEntries();
        IList<ViewModels.MenuViewModel> editMenuItems = PopulateEditMenuEntries();

        _topMenuItems.Add(new ViewModels.MenuViewModel() { MenuText = "_File", Children = new ObservableCollection<ViewModels.MenuViewModel>(fileMenuItems) });
        _topMenuItems.Add(new ViewModels.MenuViewModel() { MenuText = "_Edit", Children = new ObservableCollection<ViewModels.MenuViewModel>(editMenuItems) });

   private IList<ViewModels.MenuViewModel> PopulateFileMenuEntries()
    {
        List<ViewModels.MenuViewModel> fileMenuItems = new List<ViewModels.MenuViewModel>();

        fileMenuItems.Add(new ViewModels.MenuViewModel() { MenuText = "_Open", MenuIcon = new BitmapImage(new Uri("pack://application:,,,/Resources/OpenDocument16.png")) , Command = _mainWindowViewModel.OpenCommand });
        fileMenuItems.Add(new ViewModels.MenuViewModel() { MenuText = "Open _Recent" });

        return fileMenuItems;
    }

MenuViewModel:

public class MenuViewModel : ObservableObject
{
    internal MenuViewModel()
    {
        IsEnabled = true;
    }

    private string _menuText;
    public string MenuText
    {
        get { return _menuText; }
        set
        {
            if (_menuText == value)
                return;

            _menuText = value; base.RaisePropertyChanged("MenuText");
        }
    }

    private ICommand _command;
    public ICommand Command
    {
        get { return _command; }
        set
        {
            if (_command == value)
                return;

            _command = value; base.RaisePropertyChanged("Command");
        }
    }

    private BitmapImage _menuIcon;
    public BitmapImage MenuIcon
    {
        get { return _menuIcon; }
        set
        {
            if (_menuIcon == value)
                return;

            _menuIcon = value; base.RaisePropertyChanged("MenuIcon");
        }
    }


    private ObservableCollection<MenuViewModel> _children;
    public ObservableCollection<MenuViewModel> Children
    {
        get { return _children; }
        set
        {
            _children = value; base.RaisePropertyChanged("Children");
        }
    }
}

Any help in getting this rendered correctly would be greatly appreciated.

EDIT:

Here’s the final solution in case someone comes across this similar issue:

<DockPanel>
    <Menu DockPanel.Dock="Top" Height="auto" ItemsSource="{Binding TopMenuItems}" >
        <Menu.Resources>
            <Image x:Key="MenuIconResource" Height="16" Width="16" Source="{Binding MenuIcon}" x:Shared="False" />
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Command" Value="{Binding Command}" />
                <Setter Property="Header" Value="{Binding MenuText}" />
                <Setter Property="InputGestureText" Value="{Binding ShortcutText}" />
                <Setter Property="IsEnabled" Value="{Binding IsEnabled}" />
                <Setter Property="Icon" Value="{StaticResource MenuIconResource}" />
                <Setter Property="ItemsSource" Value="{Binding Children}"/>

                <Style.Triggers>
                    <DataTrigger Binding="{Binding }" Value="{x:Null}">
                        <Setter Property="Template" >
                            <Setter.Value>
                                <ControlTemplate>
                                    <Separator Style="{StaticResource {x:Static MenuItem.SeparatorStyleKey}}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Menu.Resources>
    </Menu>

Answer 1

Try this instead of your DataTemplate

 <DockPanel>
    <Menu DockPanel.Dock="Top" Height="auto"
          ItemsSource="{Binding TopMenuItems}">

        <Menu.Resources>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Command" Value="{Binding Command}" />
                <Setter Property="Header" Value="{Binding MenuText}" />
                <Setter Property="Icon">
                    <Setter.Value>
                        <Image Source="{Binding MenuIcon}" Height="16px" Width="16px" />
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsSource" Value="{Binding Children}"/>
            </Style>
        </Menu.Resources>

    </Menu>
</DockPanel>