DevExpress WinForms v18.2新版亮点

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

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

来源:   发布时间:2017-12-26   浏览:878次

本文档介绍在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控件提供的属性列表:

Class Property
ToolBarControlBase ItemsSource
ItemTemplate
ItemTemplateSelector
ItemStyle
BarManager BarsSource
BarTemplate
BarTemplateSelector
BarStyle
BarBarLinkContainerItemBarSubItemPopupMenu ItemLinksSource
ItemTemplate
ItemStyle
ItemTemplateSelector
ApplicationMenuRibbonPageGroup ItemLinksSource
ItemTemplate
ItemStyle
ItemTemplateSelector
RibbonControlRibbonStatusBarControl CategoriesSource
CategoryTemplate
CategoryStyle
CategoryTemplateSelector
RibbonPageCategory PagesSource
PageTemplate
PageTemplateSelector
PageStyle
RibbonPage GroupsSource
GroupTemplate
GroupStyle
GroupTemplateSelector
GalleryControl GroupsSource
GroupTemplate
GroupStyle
GroupTemplateSelector
GalleryItemGroup ItemsSource
ItemTemplate
ItemStyle
ItemTemplateSelector

隐形数据模板

...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控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/1054.html

相关产品: DevExpress Universal Subscription,


联系我们
  • 重庆总部 023-68661681 400-700-1020
  • 北京公司 010-56705895
购买
  • sales@evget.com
合作
  • business@evget.com