从视图模型结合MVVM动态菜单UI [英] MVVM Dynamic Menu UI from binding with ViewModel

问题描述

我新的WPF和MVVM。我与LOB应用程序一个团队工作。我们希望有一个动态的菜单控制，这将基于登录的用户配置文件菜单。在previous开发方案（即ASP.NET），我们使用，通过它描述了采集和生成菜单项动态数据进行迭代。在MVVM我会怎么做呢？我可以分开视图模型XAML视图描述菜单元素？

解决方案：

与评论员输入我能动态绑定菜单从视图模型的数据。这<一个href=\"http://uicraftsman.com/blog/2008/11/26/building-a-databound-wpf-menu-using-a-hierarchicaldatatemplate/\"相对=nofollow>文章帮了大忙了。

XAML：

 ＆LT; HierarchicalDataTemplate数据类型={X：型自：菜单}的ItemsSource ={绑定路径=儿童，UpdateSourceTrigger =的PropertyChanged}＆GT;
    ＆lt;内容presenter CONTENT ={绑定路径= MenuText}RecognizesAccessKey =真/＆GT;
＆LT; / HierarchicalDataTemplate＆GT;[...]＆LT;菜单高度=21保证金=0NA​​ME =MAINMENUVerticalAlignment =顶部的Horizo​​ntalAlignment =弹力
      的ItemsSource ={绑定路径=的MenuItems，UpdateSourceTrigger =的PropertyChanged}ItemContainerStyle ={StaticResource的TopMenuItems}＆GT;
    ＆LT; Menu.Background＆GT;
        ＆LT;的ImageBrush的ImageSource =/ Wpf.Modules;组件/图片/ MenuBg.jpg/＆GT;
    ＆LT; /Menu.Background>
＆LT; /菜单＆gt;
 

菜单数据类：

 公共类菜单：ViewModelBase
{
    公共菜单（）
    {
        IsEnabled =真;
        儿童=新的​​List＆LT;菜单＆gt;（）;
    }    ＃地区[菜单属性]    私人布尔_isEnabled;
    私人字符串_menuText;
    私人的ICommand _command;
    私人的IList＆LT;菜单＆gt; _children;    公共字符串MenuText
    {
        {返回_menuText; }
        组
        {
            _menuText =价值;
            base.OnPropertyChanged（MenuText）;
        }
    }    公共BOOL IsEnabled
    {
        {返回_isEnabled; }
        组
        {
            _isEnabled =价值;
            base.OnPropertyChanged（IsEnabled）;
        }
    }    公共ICommand的命令
    {
        {返回_command; }
        组
        {
            _command =价值;
            base.OnPropertyChanged（命令）;
        }
    }    公众的IList＆LT;菜单＆gt;孩子
    {
        {返回_children; }
        组
        {
            _children =价值;
        }
    }    #endregion
}
 

解决方案

尝试是这样的：

 公共类MenuItemViewModel
{
    公共MenuItemViewModel（）
    {
        this.MenuItems =新的List＆LT; MenuItemViewModel＆GT;（）;
    }    公共字符串文本{搞定;组; }    公众的IList＆LT; MenuItemViewModel＆GT; {的MenuItems获得;私人集; }
}
 

假设你的DataContext有一个属性称为的MenuItems是MenuItemViewModel的列表。这样的事情应该工作，那么：

 ＆LT;窗​​口x：类=WpfApplication1.Window1
        的xmlns =htt​​p://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
        的xmlns：X =htt​​p://schemas.microsoft.com/winfx/2006/xaml
        的xmlns：自=CLR的命名空间：WpfApplication1
        标题=窗口1HEIGHT =300WIDTH =300＆GT;
    ＆LT; Window.Resources＆GT;
        ＆LT; HierarchicalDataTemplate数据类型={X：型自：MenuItemViewModel}
                                  的ItemsSource ={绑定路径=的MenuItems}＆GT;
            ＆lt;内容presenter CONTENT ={绑定路径=文本}/＆GT;
        ＆LT; / HierarchicalDataTemplate＆GT;
    ＆LT; /Window.Resources>
    ＆LT;＆DockPanel中GT;
        ＆LT;菜单DockPanel.Dock =顶部的ItemsSource ={绑定路径=的MenuItems}/＆GT;
        ＆LT;网/＆GT;
    ＆LT; / DockPanel中＆GT;
＆LT; /窗GT;
 

I'm new to WPF and MVVM. I am working with a team on LoB application. We would like to have a dynamic Menu control, which creates the menu based on the logged in user profile. In previous development scenarios (namely ASP.NET) we use to iterate through data which describes collection and generate MenuItem dynamically. In MVVM how would I do this? Can I separate XAML view from ViewModel which describes menu elements?

Solution:

With inputs from commentators I were able to bind Menu dynamically with the data from ViewModel. This article was of great help too.

XAML:

<HierarchicalDataTemplate DataType="{x:Type self:Menu}" ItemsSource="{Binding Path=Children, UpdateSourceTrigger=PropertyChanged}">
    <ContentPresenter Content="{Binding Path=MenuText}" RecognizesAccessKey="True"/>
</HierarchicalDataTemplate>

[...]

<Menu Height="21" Margin="0" Name="mainMenu" VerticalAlignment="Top" HorizontalAlignment="Stretch" 
      ItemsSource="{Binding Path=MenuItems, UpdateSourceTrigger=PropertyChanged}" ItemContainerStyle="{StaticResource TopMenuItems}">
    <Menu.Background>
        <ImageBrush ImageSource="/Wpf.Modules;component/Images/MenuBg.jpg" />
    </Menu.Background>
</Menu>

Menu data class:

public class Menu : ViewModelBase
{
    public Menu()
    {
        IsEnabled = true;
        Children = new List<Menu>();
    }

    #region [ Menu Properties ]

    private bool _isEnabled;
    private string _menuText;
    private ICommand _command;
    private IList<Menu> _children;

    public string MenuText
    {
        get { return _menuText; }
        set
        {
            _menuText = value;
            base.OnPropertyChanged("MenuText");
        }
    }

    public bool IsEnabled
    {
        get { return _isEnabled; }
        set
        {
            _isEnabled = value;
            base.OnPropertyChanged("IsEnabled");
        }
    }

    public ICommand Command
    {
        get { return _command; }
        set
        {
            _command = value;
            base.OnPropertyChanged("Command");
        }
    }

    public IList<Menu> Children
    {
        get { return _children; }
        set
        {
            _children = value;
        }
    }

    #endregion
}

解决方案

Try something like this:

public class MenuItemViewModel
{
    public MenuItemViewModel()
    {
        this.MenuItems = new List<MenuItemViewModel>();
    }

    public string Text { get; set; }

    public IList<MenuItemViewModel> MenuItems { get; private set; }
}

Assume that your DataContext has a property called MenuItems which is a list of MenuItemViewModel. Something like this should work, then:

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:self="clr-namespace:WpfApplication1"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <HierarchicalDataTemplate DataType="{x:Type self:MenuItemViewModel}"
                                  ItemsSource="{Binding Path=MenuItems}">
            <ContentPresenter Content="{Binding Path=Text}" />
        </HierarchicalDataTemplate>
    </Window.Resources>
    <DockPanel>
        <Menu DockPanel.Dock="Top" ItemsSource="{Binding Path=MenuItems}" />
        <Grid />
    </DockPanel>
</Window>

这篇关于从视图模型结合MVVM动态菜单UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！