DevExpress WPF入门指南:DXBars, DXRibbon中使用MVVM的两种方式

你也可以 下载Universal安装包 或者到DevExpress中文网查看更多示例和教程哦

本文档介绍在DXBars, DXRibbon 和 GalleryControl这三个控件中使用MVVM框架的两种方法。

在View层定义UI

这是最简单的方法，UI是定义在View层的。UI元素通过View Model中的命令进行定义。

示例

这个示例创建了一个包含按钮的UI非常简单的MainMenuControl，单击按钮会调用 ShowTextCommand 。

在View Model层定义UI

这是一种更高级的方式。View Model包含所有需要渲染或者发布一个可视化组件的必备元素。DevExpress WPF 控件提供以下属性：

• ...(Item)Source - 这个属性用于绑定component/class到一个数据集。
• ...(Item)Style - 使用模板生成的视觉对象去自定义样式，它同时还允许你通过逻辑选择自定义模板。
• ...(Item)Template - 模板用于渲染底层对象。
• ...(Item)TemplateSelector - 模板选择器基于你的逻辑选择模板。

下面是WPF DevExpress Menu 和 Navigation控件提供的属性列表：

隐形数据模板

...Template 和 ...TemplateSelector属性支持数据模板的直接赋值，你也可以将数据模板和某个隐形View Models关联。在resources中定义一个DataTemplate对象并用DataType属性关联到某个View Model。DataType属性应该指定目标View Model的类型。在DevExpress安装文件的"Implicit Data Templates" demo有关于隐形模板的功能介绍。

示例

本示例演示了如何使用DXBars实现MVVM支持。完整示例可以在安装包的"MVVM Bars" demo中找到。用DXRibbon 和 GalleryControl设计应用程序也是用的同样的方法，可以在"MVVM Ribbon" demo 中了解更多。

本示例演示如何从底层集中的BarManager和bar items中使用条形图，假设有两个类 (View Models) 描述bars 和 bar items。第一个类MVVMBarViewModel提供Bars collection：

public class MVVMBarViewModel {
    public virtual ObservableCollection

第二个类BarViewModel，包含一个Commands集合，包含可以初始化条形图项目信息的元素 (BarButtonInfo)。

public class BarViewModel {
    public BarViewModel {
        Name = "";
        Commands = new ObservableCollection

主窗口的DataContext设置为MVVMBarViewModel 。这个DataContext会传递给窗口的子元素，包括BarManager组件。

DataContext="{dxmvvm:ViewModelSource Type=local:MVVMBarViewModel}" 

一旦BarManager确保可以接收合适的DataContext，它可以用数据绑定的继承MVVMBarViewModel.Bars集合的bars。

这里，BarManager.BarsSource属性是绑定到MVVMBarViewModel.Bars集合的。BarManager.BarTemplate属性设置一个模板让 BarManager.BarsSource集合中的元素可视化。集合的元素(BarViewModel objects)自动分配给DataTemplate's DataContext，允许用BarViewModel属性设置条形图初始化。所以，Bar.Caption属性绑定BarViewModel.Name 属性， Bar.ItemLinkSource 属性绑定 BarViewModel.Commands 属性。一般来讲，DataTemplate's DataContext会被这个模板自动设置为一个可视的对象。

为Bar定义DataTemplate时，DataTemplate的根元素必须是一个带有Bar对象的ContentControl。

也可能从一个模板中自动定义一个样式应用到每个bar。比如下面的markup，一个样式定义一个项目模板选择器：

所有的View Models 和 View classes之间的绑定都设置为XAML，不需要用任何code-behind文件。但是有一个例外：模板选择器必须用code-behind文件。下面例子中的CommandTemplateSelector选用了两个DataTemplates (SubItemTemplate or ItemTemplate)：

public class CommandTemplateSelector : DataTemplateSelector {
    public DataTemplate SubItemTemplate { get; set; }
    public DataTemplate ItemTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        if (item != null && item is BarButtonInfo) {
 if (item is GroupBarButtonInfo)
 return SubItemTemplate;
 else 
 return ItemTemplate;
        }
        return null;
    }
}

慧都科技，十三年行业经验，专注提供软件技术整体解决方案，致力打造全球最大的软件技术一站式服务平台。

慧都控件｜帮助企业打造成功软件

慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试

微信ID：EVGET_Huidu

企业QQ：800018081｜电话：023-66090381

扫码关注微信