New to Telerik UI for WPF? Download free 30-day trial

Use MVVM in RadRibbonView

This example shows how to use a RadRibbonView control with the Model-View-ViewModel (MVVM) pattern.

1. Set up the ViewModels

In order to demonstrate how the RadRibbonView can be used in an MVVM scenario, we will setup up a small example. First, we will define a MainViewModel containing a collection of TabViewModels. Each TabViewModel will hold a collection of GroupViewModels, which will hold a collection of ButtonViewModels.

Example 1: Defining the ViewModels

public class MainViewModel : ViewModelBase 
{ 
    public ObservableCollection<TabViewModel> Tabs 
    { 
        get 
        { 
            var tabs = new ObservableCollection<TabViewModel>(); 
            for (int i = 1; i <= 5; i++) 
            { 
                tabs.Add(new TabViewModel() { Text = "Tab " + i }); 
            } 
 
            return tabs; 
        } 
    } 
 
} 
 
public class TabViewModel 
{ 
    public string Text { get; set; } 
 
    public ObservableCollection<GroupViewModel> Groups 
    { 
        get 
        { 
            var groups = new ObservableCollection<GroupViewModel>(); 
            for (int i = 1; i <= 2; i++) 
            { 
                groups.Add(new GroupViewModel() { Text = "Group " + i }); 
            } 
 
            return groups; 
        } 
    } 
} 
 
 
public class GroupViewModel 
{ 
    public string Text { get; set; } 
 
    public ObservableCollection<ButtonViewModel> Buttons 
    { 
        get 
        { 
            var buttons = new ObservableCollection<ButtonViewModel>(); 
            for (int i = 1; i <= 2; i++) 
            { 
                buttons.Add(new ButtonViewModel() { Text = "Button " + i }); 
            } 
 
            return buttons; 
        } 
    } 
} 
 
public class ButtonViewModel 
{ 
    public string Text { get; set; } 
} 

2. Define the RadRibbonView

Next we will define a RadRibbonView and set the DataContext to an instance of our MainViewModel. Then we can bind its ItemsSource property to the Tabs collection and wire up the hierarchy using HierarchicalDataTemplates and a DataTemplate.

Example 3: Defining the RadRibbonView

<Grid> 
    <Grid.Resources> 
        <DataTemplate x:Key="ButtonTemplate"> 
            <telerik:RadRibbonButton Text="{Binding Text}" VerticalAlignment="Center" /> 
        </DataTemplate> 
 
        <HierarchicalDataTemplate x:Key="GroupHeaderTemplate" ItemsSource="{Binding Buttons}" 
                ItemTemplate="{StaticResource ButtonTemplate}"> 
            <TextBlock Text="{Binding Text}" /> 
        </HierarchicalDataTemplate> 
 
        <HierarchicalDataTemplate x:Key="TabTemplate" ItemsSource="{Binding Groups}" 
                ItemTemplate="{StaticResource GroupHeaderTemplate}"> 
            <TextBlock Text="{Binding Text}" /> 
        </HierarchicalDataTemplate> 
    </Grid.Resources> 
 
    <Grid.DataContext> 
        <local:MainViewModel /> 
    </Grid.DataContext> 
 
    <telerik:RadRibbonView ApplicationName="MVVM Example" Title="RibbonView" ItemsSource="{Binding Tabs}" ItemTemplate="{StaticResource TabTemplate}" /> 
</Grid> 

Figure 1: MVVM RadRibbonView in the Office2016 theme

MVVM RadRibbonView in the Office2016 theme

For an extended implementation, check out the Paint with MVVM example from our WPF Demos Application.

SimplifiedRibbon MVVM

Using MVVM in a SimplifiedRibbon scenario is as simple as setting the SimplifiedItemTemplate property (along with the ItemTemplate) to the corresponding DataTemplate and setting the LayoutMode property to Simplified.

Example 4: SimplifiedRibbon MVVM

  <telerik:RadRibbonView ApplicationName="MVVM Example"  Title="SimplifiedRibbon" ItemsSource="{Binding Tabs}" ItemTemplate="{StaticResource TabTemplate}" SimplifiedItemTemplate="{StaticResource TabTemplate}" LayoutMode="Simplified"/> 

Figure 2: SimplifiedRibbon MVVM in the Office2016 theme

SimplifiedRibbon MVVM in the Office2016 theme

Note, that Example 4 uses exactly the same setup as Example 3.

In this article