Skip to main content

WPF Ribbon, Bars, and Menu: MVVM Support

  • 4 minutes to read

This topic demonstrates two ways to use the MVVM pattern in DXBars, DXRibbon, and GalleryControl.

Run Demo: MVVM Bars Run Demo: MVVM Ribbon

Define UI at View Level

This is the simplest technique that defines a UI at the View level. UI element behavior is implemented by commands defined in a View Model.

The following code sample creates a simple UI that consists of a MainMenuControl with a BarButtonItem. A click on the button invokes the ShowTextCommand defined in a View Model:

Bars - MVVM Example

<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"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <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, UpdateSourceTrigger=PropertyChanged}" 
                      NullText="Type your text here" 
                      Grid.Row="1"/>
    </Grid>
</Window>
using DevExpress.Mvvm;
using DevExpress.Mvvm.DataAnnotations;

namespace WpfApplication25 {
    public class ViewModel : ViewModelBase {
        public string Text { get { return GetValue<string>(); } set { SetValue(value); } }
        IMessageBoxService MessageBoxService { get { return GetService<IMessageBoxService>(); } }
        [Command]
        public void ShowText() {
            MessageBoxService.ShowMessage(Text);
        }
    }
}

Refer to the following example for a complex implementation:

View Example: MVVM Application with WPF Bars

Define UI at View Model Level

This is an advanced technique that defines a UI in the View Model. The View Model contains all necessary information required to render or populate visual components with data.

DevExpress WPF controls include the following properties to support this MVVM pattern implementation:

*Source Property
This property binds a component/class to a data collection.
*Style Property
Allows you to customize styles of visual objects generated through templates.
*Template Property
Allows you to specify a template for generated items.
*TemplateSelector Property
Allows you to choose templates based on custom logic.

Below is a list of specific DevExpress WPF Menu and Navigation control properties:

Control *Source Property *Template Property *Style Property
ToolBarControl
MainMenuControl
StatusBarControl
ItemsSource ItemTemplate
ItemTemplateSelector
ItemStyle
BarManager BarsSource BarTemplate
BarTemplateSelector
BarStyle
Bar ItemLinksSource ItemTemplate
ItemTemplateSelector
ItemStyle
BarSubItem ItemLinksSource ItemTemplate
ItemTemplateSelector
ItemStyle
BarItemSelector
BarLinkContainerItem
ItemLinksSource ItemTemplate
ItemTemplateSelector
ItemStyle
PopupMenu
ApplicationMenu
ItemLinksSource ItemTemplate
ItemTemplateSelector
ItemStyle
RibbonControl CategoriesSource CategoryTemplate
CategoryTemplateSelector
CategoryStyle
RibbonPageCategory
RibbonDefaultPageCategory
PagesSource PageTemplate
PageTemplateSelector
PageStyle
RibbonPage GroupsSource GroupTemplate
GroupTemplateSelector
GroupStyle
RibbonPageGroup ItemLinksSource ItemTemplate
ItemTemplateSelector
ItemStyle
RibbonStatusBarControl LeftItemLinksSource
RightItemLinksSource
LeftItemTemplate
LeftItemTemplateSelector
RightItemTemplate
RightItemTemplateSelector
LeftItemStyle
RightItemStyle
GalleryControl Gallery.GroupsSource Gallery.GroupTemplate
Gallery.GroupTemplateSelector
Gallery.GroupStyle
GalleryItemGroup ItemsSource ItemTemplate
ItemTemplateSelector
ItemStyle
BackstageViewControl ItemsSource ItemTemplate
ItemTemplateSelector
ItemContainerStyle

Note

When you define a DataTemplate, the template root element must be a ContentControl with the required object (bar, bar item, ribbon page, and so on) as the content.

Implicit Data Templates

You can associate data templates with View Model classes implicitly. These templates are applied to each generated object of the specified type:

  1. Define a DataTemplate object in resources.
  2. Use the DataType property to associate the template with a View Model class.
<DataTemplate DataType="{x:Type ViewModels:BarItemViewModel}">
    <ContentControl>
        <dxb:BarButtonItem 
            Content="{Binding Caption}"
            Glyph="{Binding Glyph}"
            GlyphAlignment="Top"
            BarItemDisplayMode="ContentAndGlyph"
            Command="{Binding ExecuteActionCommand}"
            CommandParameter="{Binding Caption}"/>
    </ContentControl>
</DataTemplate>

Run Demo: Implicit Data Templates

Examples

Generate Bars and Bar Items

This example demonstrates how to generate bars and bar items in the BarManager from a View Model collection:

WPF Bars MVVM Generation

  1. Create classes that describe bars and bar items.
  2. In the View Model class, define a collection that contains objects of the specified classes.
  3. Bind the BarManager.BarsSource property to the View Model collection.
  4. Specify data templates that generate bars and bar items:

    • If you have different classes that describe each bar item, you can assign data templates implicitly.

    • If you have a class that describes multiple bar items, implement a template selector to apply different templates based on a condition. Assign this selector to the BarManager.BarTemplateSelector property.

Refer to the following GitHub example for a complete implementation:

View Example: Generate Bar Items from a View Model Collection

Generate Ribbon Pages, Groups, and Items

The example demonstrates how to generate pages, groups, and items from a collection according to the MVVM pattern. To generate pages in the RibbonPageCategory, bind the RibbonPageCategoryBase.PagesSource property to a collection. Use the RibbonPageCategoryBase.PageTemplate property to specify a template for generated pages.

The RibbonPage and RibbonPageGroup contain similar properties that allow you to generate groups and bar items:

View Example: Generate Pages, Groups, and Items from a ViewModel Collection

See Also