Edit this page

Use MVVM in RadToolbar

This example shows how to use the RadToolBar control with the Model-View-ViewModel (MVVM) pattern and a custom DataTemplateSelector.

1. Implement the custom DataTemplateSelector

Because RadToolBar may contain a variety of other controls as its items, we will use a custom DataTemplateSelector to help us determine the template for each item inside its ItemsSource.

Example 1: The custom DataTemplateSelector

public class ToolBarItemTemplateSelector : DataTemplateSelector
{
    public override System.Windows.DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is TextBlockViewModel)
        {
            return this.TextBlockTemplate;
        }
        else if (item is ColorPickerViewModel)
        {
            return this.ColorPickerTemplate;
        }
        return base.SelectTemplate(item, container);
    }

    public DataTemplate TextBlockTemplate { get; set; }
    public DataTemplate ColorPickerTemplate { get; set; }
}
Public Class ToolBarItemTemplateSelector
    Inherits DataTemplateSelector
    Public Overrides Function SelectTemplate(item As Object, container As System.Windows.DependencyObject) As System.Windows.DataTemplate
        If TypeOf item Is TextBlockViewModel Then
            Return Me.TextBlockTemplate
        ElseIf TypeOf item Is ColorPickerViewModel Then
            Return Me.ColorPickerTemplate
        End If
        Return MyBase.SelectTemplate(item, container)
    End Function

    Public Property TextBlockTemplate() As DataTemplate
        Get
            Return m_TextBlockTemplate
        End Get
        Set
            m_TextBlockTemplate = Value
        End Set
    End Property
    Private m_TextBlockTemplate As DataTemplate
    Public Property ColorPickerTemplate() As DataTemplate
        Get
            Return m_ColorPickerTemplate
        End Get
        Set
            m_ColorPickerTemplate = Value
        End Set
    End Property
    Private m_ColorPickerTemplate As DataTemplate
End Class

Example 2: Assign the ItemTemplateSelector property

<Window.Resources>
    <local:ToolBarItemTemplateSelector  x:Key="TemplateSelector"
                                        TextBlockTemplate="{StaticResource TextBlockTemplate}"
                                        ColorPickerTemplate="{StaticResource RadColorPickerTemplate}"/>
</Window.Resources>

<telerik:RadToolBar ItemTemplateSelector="{StaticResource TemplateSelector}" />

2. Create ViewModels

We will create two view models for this example: ColorPickerViewModel and TextBlockViewModel. The ColorPickerViewModel will contain a collection of colors and the TextBlockViewModel will contain a single text property.

Example 3: Define ColorPickerViewModel and TextViewModel

public class ColorPickerViewModel : ViewModelBase
{
    public ColorPickerViewModel()
    {
        this.MainPaletteColors = new ObservableCollection<Color>()
        {
            Color.FromArgb(255, 253, 253, 0),
            Color.FromArgb(255, 0, 253, 0),
            Color.FromArgb(255, 0, 253, 253),
            Color.FromArgb(255, 253, 0, 253),
            Color.FromArgb(255, 0, 0 , 253 ),
            Color.FromArgb(255, 253, 0 ,0),
            Color.FromArgb(255, 0 , 0, 126),
            Color.FromArgb(255, 0, 126, 126),
            Color.FromArgb(255, 0, 126, 0),
            Color.FromArgb(255, 126, 0, 126),
            Color.FromArgb(255, 126, 0, 0),
            Color.FromArgb(255, 126, 126, 0),
            Color.FromArgb(255, 126, 126, 126),
            Color.FromArgb(255, 190, 190, 190),
            Color.FromArgb(255, 0 , 1 , 1)
        };
    }
    public ObservableCollection<Color> MainPaletteColors { get; set; }
}

public class TextBlockViewModel : ViewModelBase
{
    public TextBlockViewModel(string text)
    {
        this.Text = text;
    }

    private string text;
    public string Text
    {
        get { return this.text; }
        set
        {
            if (this.text != value)
            {
                this.text = value;
                this.OnPropertyChanged("Text");
            }
        }
    }

}
Public Class ColorPickerViewModel
Inherits ViewModelBase
Public Sub New()
    Me.MainPaletteColors = New ObservableCollection(Of Color)() From { _
        Color.FromArgb(255, 253, 253, 0), _
        Color.FromArgb(255, 0, 253, 0), _
        Color.FromArgb(255, 0, 253, 253), _
        Color.FromArgb(255, 253, 0, 253), _
        Color.FromArgb(255, 0, 0, 253), _
        Color.FromArgb(255, 253, 0, 0), _
        Color.FromArgb(255, 0, 0, 126), _
        Color.FromArgb(255, 0, 126, 126), _
        Color.FromArgb(255, 0, 126, 0), _
        Color.FromArgb(255, 126, 0, 126), _
        Color.FromArgb(255, 126, 0, 0), _
        Color.FromArgb(255, 126, 126, 0), _
        Color.FromArgb(255, 126, 126, 126), _
        Color.FromArgb(255, 190, 190, 190), _
        Color.FromArgb(255, 0, 1, 1) _
    }
End Sub
Public Property MainPaletteColors() As ObservableCollection(Of Color)
    Get
        Return m_MainPaletteColors
    End Get
    Set
        m_MainPaletteColors = Value
    End Set
End Property
Private m_MainPaletteColors As ObservableCollection(Of Color)
End Class

Public Class TextBlockViewModel
    Inherits ViewModelBase
    Public Sub New(text As String)
        Me.Text = text
    End Sub

    Private m_text As String
    Public Property Text() As String
        Get
            Return Me.m_text
        End Get
        Set
            If Me.m_text <> value Then
                Me.m_text = value
                Me.OnPropertyChanged("Text")
            End If
        End Set
    End Property

End Class

3. Define the DataTemplates for the DataTemplateSelector

In order to use the RadColorPicker control, you have to add a reference to the following assembly: Telerik.Windows.Controls.Input

Example 4: Defining the templates for the ViewModels:

<DataTemplate x:Key="TextBlockTemplate">
    <TextBlock FontWeight="Bold" Text="{Binding Text}"/>
</DataTemplate>

<DataTemplate x:Key="RadColorPickerTemplate">
    <telerik:RadColorPicker HeaderPaletteVisibility="Collapsed" 
                            StandardPaletteVisibility="Collapsed"
                            MainPaletteItemsSource="{Binding MainPaletteColors}" 
                            MainPaletteHeaderText="Custom Colors"  
                            MainPaletteColumnsCount="5" 
                            MainPaletteOrientation="Horizontal" />
</DataTemplate>

4. Create the MainViewModel

Let's now create the MainViewModel which will contain a collection of our ViewModels.

Example 5: Create the MainViewModel

public class MainViewModel
{
    public MainViewModel()
    {
        this.PopulateSampleViewModel();
    }
    public ObservableCollection<ViewModelBase> Items { get; set; }

    private void PopulateSampleViewModel()
    {
        this.Items = new ObservableCollection<ViewModelBase>()
        {
            new TextBlockViewModel("Foreground:"),
            new ColorPickerViewModel(),
            new TextBlockViewModel("Background:"),
            new ColorPickerViewModel(),
            new TextBlockViewModel("BorderColor:"),
            new ColorPickerViewModel(),
        };
    }
}
Public Class MainViewModel
    Public Sub New()
        Me.PopulateSampleViewModel()
    End Sub
    Public Property Items() As ObservableCollection(Of ViewModelBase)
        Get
            Return m_Items
        End Get
        Set
            m_Items = Value
        End Set
    End Property
    Private m_Items As ObservableCollection(Of ViewModelBase)

    Private Sub PopulateSampleViewModel()
        Me.Items = New ObservableCollection(Of ViewModelBase)() From { _
            New TextBlockViewModel("Foreground:"), _
            New ColorPickerViewModel(), _
            New TextBlockViewModel("Background:"), _
            New ColorPickerViewModel(), _
            New TextBlockViewModel("BorderColor:"), _
            New ColorPickerViewModel() _
        }
    End Sub
End Class

5. Set the DataContext and ItemsSource of the RadToolBar

Finally we need to instantiate our ViewModel and assign it as the DataContext of the ToolBar. You should then bind the ItemsSource property to the Items property in our ViewModel. Let's also set the VerticalAlignment to Center and add some margins for better visualization.

Example 6: Set the DataContext and ItemsSource of the RadToolBar

<Window.Resources>
    <DataTemplate x:Key="TextBlockTemplate">
        <TextBlock FontWeight="Bold" Text="{Binding Text}"/>
    </DataTemplate>

    <DataTemplate x:Key="RadColorPickerTemplate">
        <telerik:RadColorPicker HeaderPaletteVisibility="Collapsed" 
                            StandardPaletteVisibility="Collapsed"
                            MainPaletteItemsSource="{Binding MainPaletteColors}" 
                            MainPaletteHeaderText="Custom Colors"  
                            MainPaletteColumnsCount="5" 
                            MainPaletteOrientation="Horizontal"/>
    </DataTemplate>

    <local:ToolBarItemTemplateSelector  x:Key="TemplateSelector"
                                        TextBlockTemplate="{StaticResource TextBlockTemplate}"
                                        ColorPickerTemplate="{StaticResource RadColorPickerTemplate}"/>

    <local:MainViewModel x:Key="MainViewModel" />
</Window.Resources>

<telerik:RadToolBar DataContext="{StaticResource MainViewModel}"
                    VerticalAlignment="Center" 
                    Margin="20 0 20 50"
                    ItemsSource="{Binding Items}"
                    ItemTemplateSelector="{StaticResource TemplateSelector}"/>

Figure 1: MVVM ToolBar with custom DataTemplateSelector

ToolBar MVVM

For an extended implementation with custom styles, check out the ToolBarMVVM demo from our SDK Samples Browser.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy