DevExpress官网

《DevExpress v17.2 版本更新公开课》点击报名

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

在View层定义UI

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

示例

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

<Window x:Class="WpfApplication25.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:local="clr-namespace:WpfApplication25"
        dx:ThemeManager.ThemeName="Office2013"
        DataContext="{dxmvvm:ViewModelSource Type={x:Type local:ViewModel}}"
        Title="MainWindow" Height="350" Width="525">
    <dxmvvm:Interaction.Behaviors>
        <dx:DXMessageBoxService/>
    </dxmvvm:Interaction.Behaviors>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dxb:MainMenuControl BarItemDisplayMode="ContentAndGlyph">
            <dxb:BarButtonItem 
                Content="Show Text" 
                Command="{Binding ShowTextCommand}"
                Glyph="{dx:DXImage Image=News_16x16.png}" 
                LargeGlyph="{dx:DXImage Image=News_32x32.png}" />
        </dxb:MainMenuControl>
        <dxe:TextEdit EditValue="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" NullText="Type your text here" Grid.Row="1"/>
    </Grid>
</Window>

在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> Bars { get; set; }

    public MVVMBarViewModel() {
        Bars = new ObservableCollection<BarViewModel>();
        //... 
    }
    //... 
}

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

public class BarViewModel {
    public BarViewModel() {
        Name = "";
        Commands = new ObservableCollection<BarButtonInfo>();
    }
    public virtual string Name { get; set; }
    public virtual ObservableCollection<BarButtonInfo> Commands { get; set; }
}

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

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

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

<local:BarsDemoModule.Resources> 
    <DataTemplate x:Key="barTemplate"> 
        <ContentControl> 
            <dxb:Bar Caption="{Binding Name}" ItemLinksSource="{Binding Commands}"/> 
        </ContentControl> 
    </DataTemplate> 
</local:BarsDemoModule.Resources> 

<dxdb:DemoModuleControl> 
    <Grid> 
        <dxb:BarManager BarsSource="{Binding Bars}" BarTemplate="{StaticResource barTemplate}" BarStyle="{StaticResource barStyle}"/> 
    </Grid> 
</dxdb:DemoModuleControl> 

这里，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，一个样式定义一个项目模板选择器：

<local:CommandTemplateSelector x:Key="itemTemplateSelector" SubItemTemplate="{StaticResource subItemTemplate}" ItemTemplate="{StaticResource itemTemplate}"/> 

<Style x:Key="barStyle" TargetType="dxb:Bar"> 
    <Setter Property="ItemTemplateSelector" Value="{StaticResource itemTemplateSelector}"/> 
</Style> 

<dxb:BarManager  
    ...
    BarStyle="{StaticResource barStyle}" 
/> 

所有的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;
    }
}

相关产品： DevExpress Universal Subscription,