WPF Ribbon, Bars, and Menu: MVVM Support

• Jun 17, 2024
• 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:

MainWindow.xaml

<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>

ViewModel.cs

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);
        }
    }
}

ViewModel.vb

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.DataAnnotations

Namespace WpfApplication25
    Public Class ViewModel
        Inherits ViewModelBase

        Public Property Text As String
            Get
                Return GetValue(Of String)()
            End Get
            Set(ByVal value As String)
                SetValue(value)
            End Set
        End Property

        Private ReadOnly Property MessageBoxService As IMessageBoxService
            Get
                Return GetService(Of IMessageBoxService)()
            End Get
        End Property

        <Command>
        Public Sub ShowText()
            MessageBoxService.ShowMessage(Text)
        End Sub
    End Class
End Namespace

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.

XAML

<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:

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:

• RibbonPage.GroupsSource, RibbonPage.GroupTemplate
• RibbonPageGroup.ItemLinksSource, RibbonPageGroup.ItemTemplate

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