Reader Level:
Article

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 Liquid_5_1_7.dll.zip 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" />

SilverlightColorSelector.xaml

<UserControl x:Class="SilverlightColorSelector.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot">
        <liquid:ColorSelector Background="Blue" BorderBrush="Green" x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />
    </Grid>
</
UserControl>

SilverlightColorSelector.xaml.CS

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()
        {
            InitializeComponent();
        }
        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
                                           
Summary
 

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

Dinesh Beniwal

I am working as VP Content Manager, responsible for content publishing, content development, and social relations. You can follow me on twitter @dbeniwal21

COMMENT USING