# WPF Ribbon, Bars, and Menu: MVVM Support | WPF Controls | DevExpress Documentation

This topic demonstrates two ways to use the [MVVM pattern](https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern) in DXBars, DXRibbon, and GalleryControl.

[Run Demo: MVVM Bars](dxdemo://Wpf/DXBars/MainDemo/MVVMBar) [Run Demo: MVVM Ribbon](dxdemo://Wpf/DXRibbon/MainDemo/MVVMRibbon)

## 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](/WPF/DevExpress.Xpf.Bars.MainMenuControl) with a [BarButtonItem](/WPF/DevExpress.Xpf.Bars.BarButtonItem). A click on the button invokes the **ShowTextCommand** defined in a View Model:

![Bars - MVVM Example](/WPF/images/Bars_MVVM_Example.png)

- MainWindow.xaml

<section id="tabpanel_Nd8UWi5JXX_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;Window x:Class=&quot;WpfApplication25.MainWindow&quot;
        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
        xmlns:dxb=&quot;http://schemas.devexpress.com/winfx/2008/xaml/bars&quot;
        xmlns:dxe=&quot;http://schemas.devexpress.com/winfx/2008/xaml/editors&quot;
        xmlns:dx=&quot;http://schemas.devexpress.com/winfx/2008/xaml/core&quot;
        xmlns:dxmvvm=&quot;http://schemas.devexpress.com/winfx/2008/xaml/mvvm&quot;
        xmlns:local=&quot;clr-namespace:WpfApplication25&quot;
        Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;
    &lt;Window.DataContext&gt;
        &lt;local:ViewModel/&gt;
    &lt;/Window.DataContext&gt;
    &lt;dxmvvm:Interaction.Behaviors&gt;
        &lt;dx:DXMessageBoxService/&gt;
    &lt;/dxmvvm:Interaction.Behaviors&gt;
    &lt;Grid&gt;
        &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height=&quot;Auto&quot;/&gt;
            &lt;RowDefinition Height=&quot;Auto&quot;/&gt;
        &lt;/Grid.RowDefinitions&gt;
        &lt;dxb:MainMenuControl BarItemDisplayMode=&quot;ContentAndGlyph&quot;&gt;
            &lt;dxb:BarButtonItem Content=&quot;Show Text&quot;
                               Command=&quot;{Binding ShowTextCommand}&quot;
                               Glyph=&quot;{dx:DXImage Image=News_16x16.png}&quot;
                               LargeGlyph=&quot;{dx:DXImage Image=News_32x32.png}&quot;/&gt;
        &lt;/dxb:MainMenuControl&gt;
        &lt;dxe:TextEdit EditValue=&quot;{Binding Text, UpdateSourceTrigger=PropertyChanged}&quot; 
                      NullText=&quot;Type your text here&quot; 
                      Grid.Row=&quot;1&quot;/&gt;
    &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre></section>

- ViewModel.cs
- ViewModel.vb

<section id="tabpanel_Nd8UWi5JXX-1_tabid-csharp" role="tabpanel" data-tab="tabid-csharp">
<pre><code data-code-links="{&quot;/ (DevExpress.Mvvm)(?:;|$)/&quot;:&quot;/CoreLibraries/DevExpress.Mvvm&quot;,&quot;/ (DevExpress.Mvvm.DataAnnotations)(?:;|$)/&quot;:&quot;/CoreLibraries/DevExpress.Mvvm.DataAnnotations&quot;}" class="lang-csharp">using DevExpress.Mvvm;
using DevExpress.Mvvm.DataAnnotations;

namespace WpfApplication25 {
    public class ViewModel : ViewModelBase {
        public string Text { get { return GetValue&lt;string&gt;(); } set { SetValue(value); } }
        IMessageBoxService MessageBoxService { get { return GetService&lt;IMessageBoxService&gt;(); } }
        [Command]
        public void ShowText() {
            MessageBoxService.ShowMessage(Text);
        }
    }
}
</code></pre></section>
<section id="tabpanel_Nd8UWi5JXX-1_tabid-vb" role="tabpanel" data-tab="tabid-vb" aria-hidden="true" hidden="hidden">
<pre><code data-code-links="{&quot;/ (DevExpress.Mvvm)(?:;|$)/&quot;:&quot;/CoreLibraries/DevExpress.Mvvm&quot;,&quot;/ (DevExpress.Mvvm.DataAnnotations)(?:;|$)/&quot;:&quot;/CoreLibraries/DevExpress.Mvvm.DataAnnotations&quot;}" class="lang-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

        &lt;Command&gt;
        Public Sub ShowText()
            MessageBoxService.ShowMessage(Text)
        End Sub
    End Class
End Namespace
</code></pre></section>

Refer to the following example for a complex implementation:

[View Example: MVVM Application with WPF Bars](https://github.com/DevExpress-Examples/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](/WPF/DevExpress.Xpf.Bars.ToolBarControl) <br> [MainMenuControl](/WPF/DevExpress.Xpf.Bars.MainMenuControl) <br> [StatusBarControl](/WPF/DevExpress.Xpf.Bars.StatusBarControl) | [ItemsSource](/WPF/DevExpress.Xpf.Bars.ToolBarControlBase.ItemsSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.ToolBarControlBase.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.ToolBarControlBase.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.ToolBarControlBase.ItemStyle) |
| [BarManager](/WPF/DevExpress.Xpf.Bars.BarManager) | [BarsSource](/WPF/DevExpress.Xpf.Bars.BarManager.BarsSource) | [BarTemplate](/WPF/DevExpress.Xpf.Bars.BarManager.BarTemplate) <br> [BarTemplateSelector](/WPF/DevExpress.Xpf.Bars.BarManager.BarTemplateSelector) | [BarStyle](/WPF/DevExpress.Xpf.Bars.BarManager.BarStyle) |
| [Bar](/WPF/DevExpress.Xpf.Bars.Bar) | [ItemLinksSource](/WPF/DevExpress.Xpf.Bars.BarItemLinkHolderBase.ItemLinksSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.BarItemLinkHolderBase.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.BarItemLinkHolderBase.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.BarItemLinkHolderBase.ItemStyle) |
| [BarSubItem](/WPF/DevExpress.Xpf.Bars.BarSubItem) | [ItemLinksSource](/WPF/DevExpress.Xpf.Bars.BarSubItem.ItemLinksSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.BarSubItem.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.BarSubItem.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.BarSubItem.ItemStyle) |
| [BarItemSelector](/WPF/DevExpress.Xpf.Bars.BarItemSelector) <br> [BarLinkContainerItem](/WPF/DevExpress.Xpf.Bars.BarLinkContainerItem) | [ItemLinksSource](/WPF/DevExpress.Xpf.Bars.BarLinkContainerItem.ItemLinksSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.BarLinkContainerItem.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.BarLinkContainerItem.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.BarLinkContainerItem.ItemStyle) |
| [PopupMenu](/WPF/DevExpress.Xpf.Bars.PopupMenu) <br> [ApplicationMenu](/WPF/DevExpress.Xpf.Ribbon.ApplicationMenu) | [ItemLinksSource](/WPF/DevExpress.Xpf.Bars.PopupMenu.ItemLinksSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.PopupMenu.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.PopupMenu.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.PopupMenu.ItemStyle) |
| [RibbonControl](/WPF/DevExpress.Xpf.Ribbon.RibbonControl) | [CategoriesSource](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.CategoriesSource) | [CategoryTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.CategoryTemplate) <br> [CategoryTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.CategoryTemplateSelector) | [CategoryStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonControl.CategoryStyle) |
| [RibbonPageCategory](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategory) <br> [RibbonDefaultPageCategory](/WPF/DevExpress.Xpf.Ribbon.RibbonDefaultPageCategory) | [PagesSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PagesSource) | [PageTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PageTemplate) <br> [PageTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PageTemplateSelector) | [PageStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PageStyle) |
| [RibbonPage](/WPF/DevExpress.Xpf.Ribbon.RibbonPage) | [GroupsSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupsSource) | [GroupTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupTemplate) <br> [GroupTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupTemplateSelector) | [GroupStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupStyle) |
| [RibbonPageGroup](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup) | [ItemLinksSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemLinksSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemStyle) |
| [RibbonStatusBarControl](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl) | [LeftItemLinksSource](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.LeftItemLinksSource) <br> [RightItemLinksSource](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.RightItemLinksSource) | [LeftItemTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.LeftItemTemplate) <br> [LeftItemTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.LeftItemTemplateSelector) <br> [RightItemTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.RightItemTemplate) <br> [RightItemTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.RightItemTemplateSelector) | [LeftItemStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.LeftItemStyle) <br> [RightItemStyle](/WPF/DevExpress.Xpf.Ribbon.RibbonStatusBarControl.RightItemStyle) |
| [GalleryControl](/WPF/DevExpress.Xpf.Bars.GalleryControl) | [Gallery.GroupsSource](/WPF/DevExpress.Xpf.Bars.Gallery.GroupsSource) | [Gallery.GroupTemplate](/WPF/DevExpress.Xpf.Bars.Gallery.GroupTemplate) <br> [Gallery.GroupTemplateSelector](/WPF/DevExpress.Xpf.Bars.Gallery.GroupTemplateSelector) | [Gallery.GroupStyle](/WPF/DevExpress.Xpf.Bars.Gallery.GroupStyle) |
| [GalleryItemGroup](/WPF/DevExpress.Xpf.Bars.GalleryItemGroup) | [ItemsSource](/WPF/DevExpress.Xpf.Bars.GalleryItemGroup.ItemsSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Bars.GalleryItemGroup.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Bars.GalleryItemGroup.ItemTemplateSelector) | [ItemStyle](/WPF/DevExpress.Xpf.Bars.GalleryItemGroup.ItemStyle) |
| [BackstageViewControl](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl) | [ItemsSource](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl.ItemsSource) | [ItemTemplate](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl.ItemTemplate) <br> [ItemTemplateSelector](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl.ItemTemplateSelector) | [ItemContainerStyle](/WPF/DevExpress.Xpf.Ribbon.BackstageViewControl.ItemContainerStyle) |

Note

When you define a `DataTemplate`, the template root element must be a [ContentControl](https://learn.microsoft.com/dotnet/api/system.windows.controls.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](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/data-templating-overview?view=netframeworkdesktop-4.8#the-datatype-property). 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

<section id="tabpanel_Nd8UWi5JXX-2_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;DataTemplate DataType=&quot;{x:Type ViewModels:BarItemViewModel}&quot;&gt;
    &lt;ContentControl&gt;
        &lt;dxb:BarButtonItem 
            Content=&quot;{Binding Caption}&quot;
            Glyph=&quot;{Binding Glyph}&quot;
            GlyphAlignment=&quot;Top&quot;
            BarItemDisplayMode=&quot;ContentAndGlyph&quot;
            Command=&quot;{Binding ExecuteActionCommand}&quot;
            CommandParameter=&quot;{Binding Caption}&quot;/&gt;
    &lt;/ContentControl&gt;
&lt;/DataTemplate&gt;
</code></pre></section>

[Run Demo: Implicit Data Templates](dxdemo://Wpf/DXBars/MainDemo/ImplicitDataTemplates)

### Examples

#### Generate Bars and Bar Items

This example demonstrates how to generate bars and bar items in the [BarManager](/WPF/DevExpress.Xpf.Bars.BarManager) from a View Model collection:

![WPF Bars MVVM Generation](/WPF/images/WPF_Bars_MVVM_Generation.png)

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](/WPF/DevExpress.Xpf.Bars.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](/WPF/DevExpress.Xpf.Bars.BarManager.BarTemplateSelector) property.

Refer to the following GitHub example for a complete implementation:

[View Example: Generate Bar Items from a View Model Collection](https://github.com/DevExpress-Examples/wpf-bars-mvvm-generate-bars-from-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](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategory), bind the [RibbonPageCategoryBase.PagesSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PagesSource) property to a collection. Use the [RibbonPageCategoryBase.PageTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPageCategoryBase.PageTemplate) property to specify a template for generated pages.

The [RibbonPage](/WPF/DevExpress.Xpf.Ribbon.RibbonPage) and [RibbonPageGroup](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup) contain similar properties that allow you to generate groups and bar items:

- [RibbonPage.GroupsSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupsSource), [RibbonPage.GroupTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPage.GroupTemplate)
- [RibbonPageGroup.ItemLinksSource](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemLinksSource), [RibbonPageGroup.ItemTemplate](/WPF/DevExpress.Xpf.Ribbon.RibbonPageGroup.ItemTemplate)

[View Example: Generate Pages, Groups, and Items from a ViewModel Collection](https://github.com/DevExpress-Examples/wpf-ribbon-generate-pages-groups-and-items-from-viewmodel-collection)

See Also

[RibbonControl](/WPF/DevExpress.Xpf.Ribbon.RibbonControl)

[ToolBarControl](/WPF/DevExpress.Xpf.Bars.ToolBarControl)

[MainMenuControl](/WPF/DevExpress.Xpf.Bars.MainMenuControl)

[StatusBarControl](/WPF/DevExpress.Xpf.Bars.StatusBarControl)

[BarManager](/WPF/DevExpress.Xpf.Bars.BarManager)

[GalleryControl](/WPF/DevExpress.Xpf.Bars.GalleryControl)