使用 HierarchicalDataTemplate 的 WPF 菜单绑定无法正确呈现菜单项

WPF Menu binding using HierarchicalDataTemplate is not rendering menu items properly

提问by genus

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.

我正在构建一个 WPF 应用程序，试图严格遵守 MVVM 原则。我在让菜单正确呈现时遇到问题。我尝试了几种方法，但遇到了困难。看起来我的绑定是正确的，但我不确定我的样式操作。

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.

这是我遇到问题的代码。就像我说的那样，绑定似乎很好，我什至可以使用 Snoop 看到 Header 菜单项的正确值，但我看到的只是菜单项的空容器。

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

回答by user195275

Try this instead of your DataTemplate

试试这个而不是你的 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>