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
For an extended implementation with custom styles, check out the ToolBarMVVM demo from our SDK Samples Browser.