你也可以 下載Universal安裝包 或者到 查看更多示例和教程哦

本文檔介紹在DXBars, DXRibbon 和 GalleryControl這三個控件中使用MVVM框架的兩種方法。

在View層定義UI

這是最簡單的方法，UI是定義在View層的。UI元素通過View Model中的命令進行定義。

示例

這個示例創建了一個包含按鈕的UI非常簡單的MainMenuControl，單擊按鈕會調用 ShowTextCommand 。

<Window x:Class="WpfApplication25.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxb="//schemas.devexpress.com/winfx/2008/xaml/bars"
        xmlns:dxe="//schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dx="//schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxmvvm="//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;
    }
}

你也可以 下載Universal安裝包 或者到 查看更多示例和教程哦

慧都學院2017全新DevExpress線下研修班火熱報名中！