Populate ColorPicker with Business Data
This article will show you how to use the RadColorPicker in MVVM scenarios. Also, we will show you which properties to bind and how to create a custom View and ViewModel.
The final result will look like this:
Prepare the MainViewModel
For the purpose of this example we will create a ColorModel class and three ObservableCollections of ColorModel which will be named as follows: StandardPaletteColors, MainPaletteColors and HeaderPaletteColors. The ColorModel class will expose a CustomColor property of type Color.
public class ColorModel : ViewModelBase
{
public ColorModel()
{
}
private Color customColor;
public Color CustomColor
{
get { return this.customColor; }
set
{
if (this.customColor != value)
{
this.customColor = value;
this.OnPropertyChanged("CustomColor");
}
}
}
}
Public Class ColorModel
Inherits ViewModelBase
Public Sub New()
End Sub
Private customColor As Color
Public Property CustomColor() As Color
Get
Return Me.customColor
End Get
Set(value As Color)
If Me.customColor <> value Then
Me.customColor = value
Me.OnPropertyChanged("CustomColor")
End If
End Set
End Property
End Class
Next we will define the MainViewModel which will wrap and fill the collections of ColorModel objects.
public class MainViewModel : ViewModelBase
{
private ObservableCollection<ColorModel> mainPaletteColors;
private ObservableCollection<ColorModel> headerPaletteColors;
private ObservableCollection<ColorModel> standardPaletteColors;
}
Public Class MainViewModel
Inherits ViewModelBase
Private m_mainPaletteColors As ObservableCollection(Of ColorModel)
Private m_headerPaletteColors As ObservableCollection(Of ColorModel)
Private m_standardPaletteColors As ObservableCollection(Of ColorModel)
End Class
Then we can set this model as DataContext of the RadColorPicker. Go in your code behind file and add the following code after the InitializeComponent();
this.DataContext = new MainViewModel();
Me.DataContext = New MainViewModel()
After this is done we can prepare the View of our application.
Prepare the View
We will use customized Path to visualize the different colors. In order to do this we will define a custom DataTemplate as the PaletteItemsTemplate property of the RadColorPicker. Also, we will bind our collections (defined in the MainViewModel) to each of the following properties of the control: HeaderPaletteItemsSource, MainPaletteItemsSource and StandardPaletteItemsSource.
Please note that in MVVM scenarios you have to set the RadColorPicker.ColorPropertyPath. This is a path to a value on the MainViewModel that serves as the visual representation of the RadColorPaletteViewItem.Color. You can assume that the ColorPropertyPath mimics the behavior of the ItemsControl.DisplayMemberPath.
These steps can be implemented with the following code:
<Grid>
<Grid.Resources>
<DataTemplate x:Key="PaletteItemsTemplate">
<Path Data="M8,6 C8.5522861,6 9.000001,6.4477153 9.000001,7 C9.000001,7.5522847
8.5522861,8 8.000001,8 C7.4477162,8 7.000001,7.5522847 7.000001,7
C7.000001,6.4477153 7.4477162,6 8.000001,6 z M3,0 L8,4 C6.3431458,4
5,5.3431458 5,7 C5,8.6568546 6.3431458,10 8,10 C9.6568546,10 11,8.6568546
11,7 C11,5.3431458 9.6568546,4 8,4 L13,0 L11,6 L16,10 L10,10 L8,16 L6,10
L0,10 L5,6 z ">
<Path.Fill>
<SolidColorBrush Color="{Binding CustomColor}" />
</Path.Fill>
</Path>
</DataTemplate>
</Grid.Resources>
<telerik:RadColorPicker ColorPropertyPath="CustomColor"
HeaderPaletteItemsSource="{Binding HeaderPaletteColors}"
MainPaletteItemsSource="{Binding MainPaletteColors}"
PaletteItemsTemplate="{StaticResource PaletteItemsTemplate}"
StandardPaletteItemsSource="{Binding StandartPaletteColors}" />
</Grid>
Please note that this article doesn't demonstrate how to customize the ToolTip of the colors. If you need to implement such a scenario, please refer to this article.
The final result should be similar to the following one:
