Панель меню MVVM с привязкой

Question

Как создать строку меню в соответствии с шаблоном MVVM и как связать модели представления с xaml

Я создал модель представления элемента для отдельных элементов и модель представления списка для сбора отдельных элементов.items

ItemViewModel file

/// <summary>
/// Menu item viewModel
/// </summary>
public class MenuItemViewModel : BaseViewModel
{
    #region Public Properties

    /// <summary>
    /// The displayed name
    /// </summary>
    public string Header { get; set; }

    /// <summary>
    /// The item order
    /// </summary>
    public int Order { get; set; }

    /// <summary>
    /// True if this item is Enabled
    /// </summary>
    public bool IsEnabled { get; set; }

    /// <summary>
    /// True if this item is currently selected
    /// </summary>        
    public bool IsSelected { get; set; }

    /// <summary>
    /// The item icon
    /// </summary>        
    public string Icon { get; set; }

    /// <summary>
    /// The parent view model.
    /// </summary>        
    public MenuListViewModel Parent { get; set; }

    #endregion

    #region Public Commands

    /// <summary>
    /// The command for when the item is clicked
    /// </summary>
    public ICommand OpenCommand { get; set; }


    #endregion

    #region Constructor
    /// <summary>
    /// Default constructor
    /// </summary>
    public MenuItemViewModel()
    {
        // Create commands
        OpenCommand = new RelayCommand(ItemCommand);
    } 
    #endregion

    #region Command Methods

    /// <summary>
    /// When the item is clicked 
    /// </summary>
    public virtual void ItemCommand() { }

    #endregion
}

MenuListViewModel file

/// <summary>
/// Sub Menu item viewModel
/// </summary>
public class MenuListViewModel : BaseViewModel
{

    #region Protected Members

    /// <summary>
    /// The items list
    /// </summary>
    protected ObservableCollection<MenuItemViewModel> mItemsChildren;

    /// <summary>
    /// The items list
    /// </summary>
    protected ObservableCollection<Action> mChildrenCommands;

    /// <summary>
    /// The subMenu list
    /// </summary>
    protected ObservableCollection<MenuListViewModel> mSubMentChildren;

    #endregion

    #region Public Properties

    /// <summary>
    /// The displayed name
    /// </summary>
    public string Header { get; set; }

    /// <summary>
    /// True if this item is Enabled
    /// </summary>

    public bool IsEnabled { get; set; }

    /// <summary>
    /// True if this item is currently selected
    /// </summary>        
    public bool IsSelected { get; set; }

    /// <summary>
    /// The item icon
    /// </summary>        
    public object Icon { get; set; }

    /// <summary>
    /// The menu order
    /// </summary>
    public int Order { get; set; }

    /// <summary>
    /// The parent view model.
    /// </summary>
    public MenuListViewModel ParentViewModel { get; set; }

    /// <summary>
    /// The items list
    /// </summary>
    public ObservableCollection<MenuItemViewModel> Items
    {
        get => mItemsChildren;
        set
        {
            // Make sure list has changed
            if (mItemsChildren == value)
                return;

            // Update value
            mItemsChildren = value;
        }
    }

    /// <summary>
    /// The items list
    /// </summary>
    public ObservableCollection<Action> ItemsCommands
    {
        get => mChildrenCommands;
        set
        {
            // Make sure list has changed
            if (mChildrenCommands == value)
                return;

            // Update value
            mChildrenCommands = value;
        }
    }

    /// <summary>
    /// The subMenu items for the list
    /// </summary>
    public ObservableCollection<MenuListViewModel> SubMenuItems
    {
        get => mSubMentChildren;
        set
        {
            // Make sure list has changed
            if (mSubMentChildren == value)
                return;

            // Update value
            mSubMentChildren = value;
        }
    }

    #endregion

    public virtual void LoadChildMenuItems()
    {

    }
}

XAML-файл

<UserControl.Resources>
    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="Header" Value="{Binding Path=Header}"/>
        <Setter Property="Command" Value="{Binding Path=Command}"/>
    </Style>
    <HierarchicalDataTemplate 
    DataType="{x:Type local:MenuBarViewModel}"
    ItemsSource="{Binding Path=Items}">
    </HierarchicalDataTemplate>
</UserControl.Resources>

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

Итак, как добавить этот viewModles в xaml-файл ипривязать их к заголовкам и командам

Answer 1

У вас нет элементов коллекции в вашей MenuItemViewModel.Способ работы иерархической таблицы данных заключается в том, что она связывает источник элементов дочернего меню со свойством родителя.Так как у вас этого нет, лучшее, что может случиться, это просто получить верхний уровень.

Вот несколько упрощенных разметок и кода:

    <Menu ItemsSource="{Binding MenuItems}" Height="30">
        <Menu.Resources>
            <Style TargetType="{x:Type MenuItem}">
                <Setter Property="Header" Value="{Binding Path=Header}"/>
                <Setter Property="Command" Value="{Binding Path=Command}"/>
            </Style>
            <HierarchicalDataTemplate 
                 DataType="{x:Type local:MenuItemVM}"
                 ItemsSource="{Binding SubItems}">
            </HierarchicalDataTemplate>
        </Menu.Resources>
    </Menu>

В моей модели окна просмотра я установил несколькобазовые данные:

    private ObservableCollection<MenuItemVM> menuItems = new ObservableCollection<MenuItemVM>(
        new List<MenuItemVM>
        {
            new MenuItemVM{ Header="File", SubItems= new ObservableCollection<MenuItemVM>( new List<MenuItemVM>
            {
                new MenuItemVM{ Header="Open"},
                new MenuItemVM{ Header="Save"}
            })
            }
        }

        );

И мое упрощенное меню:

public class MenuItemVM
{
    public string Header { get; set; }
    public ICommand Command { get; set; }
    public ObservableCollection<MenuItemVM> SubItems { get; set; }
}