Scroll To Top
Reader Level:

Color Selector Control in Silverlight

By Dinesh Beniwal on Feb 17, 2009
In this article you will learn how to use Silverlight Color Selector Control.

Silverlight Color Selector Control

This Color Selector control provides the user with a simple way to select from a list of pre-defined colors.

This Silverlight only Color Selector Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

If you want use Color Selector Control you will need to add a reference to Liquid.dll in your application.

Download a from top of the article.

Creating a ColorSelector Control

The ColorSelector element represents a ColorSelector control in XAML.

<liquid:ColorSelector />

The Background property represents a Background color of the ColorSelector. The BorderBrush Propoerty represents a Border of the ColorSelector, X:Name property represents a name of the ColorSelector.


The code snippet creates a ColorSelector control and sets the Background, BorderBrush and X:Name Property.

<liquid:ColorSelector Background="Black" BorderBrush="Blue" x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />


<UserControl x:Class="SilverlightColorSelector.Page"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot">
        <liquid:ColorSelector Background="Blue" BorderBrush="Green" x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightColorSelector
    public partial class Page : UserControl
        public Page()
        private void selectColor_SelectionChanged(object sender, EventArgs e)
            LayoutRoot.Background = new SolidColorBrush(selectColor.Selected);

The output is :

Figure 1

If you select any color like Blue the Result is :

Figure 2

In this article, I discussed how we can use a silverlight color selector control.