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:

Rad Color Picker How To Data Binding Object

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:

Rad Color Picker How To Data Binding Object

See Also

In this article
Not finding the help you need? Improve this article