MVVM Support

This example shows how to use a RadRibbonView control with the Model-View-ViewModel (MVVM) pattern. Before proceeding with the set-up we need to get familiar with HierarchicalDataTemplateHelper class.

HierarchicalDataTemplateHelper

The HierarchicalDataTemplateHelper is a helper class which exposes attached properties for building a hierarchy of DataTemplates used for MVVM scenarios with ItemsControls.

You can access the HierarchicalDataTemplateHelper class through an alias pointing to the Telerik.UI.Xaml.Controls namespace: xmlns:telerik="using:Telerik.UI.Xaml.Controls"

This class exposes the following properties:

• ItemsSourcePath: A property of type string that gets or sets the source of the DataTemplate.
• ItemTemplate: A property of type DataTemplate that gets or sets the DataTemplate of the items.
• ItemTemplateSelector: A property of type DataTemplateSelector that gets or sets the selector instance that may be used to retrieve dynamic data templates on a per-item basis.
• ItemContainerStyle: A property of type Style that gets or sets the Style applied to the items container.
• ItemContainerStyleSelector: A property of type StyleSelector that gets or sets custom style-selection logic for a style that can be applied to each generated container element.

Now with this in hand, we can continue to the next part of this article.

Use MVVM in RadRibbonView

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

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 HierarchicalDataTemplateHelper class and a DataTemplates.

Example 3: Defining the RadRibbonView

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

Figure 1: MVVM RadRibbonView

For an extended implementation, check out the MVVM example from our WinUI Demos Application.

See Also

• SimplifiedRibbon