Click here to Skip to main content
Click here to Skip to main content
Go to top

Silverlight ColorPicker

, 8 Jan 2011
Rate this:
Please Sign up or sign in to vote.
A Silverlight color picker (looks like ComboBox), more like the one used within VS 2010 property browser for editing color-type

SilverlightColorPicker1.png

SilverlightColorPicker2.png

Introduction

Last year, I was engaged in an ASP.NET Ajax project. We needed to build a very complex Silverlight control. My job was to build this Silverlight control. Silverlight is amazing. But a lot of common controls such as ToolBar, ContextMenu, etc. are not there. You need to buy or create. In this article, I'd like to talk about a color-picker control with drop-down color selection capabilities, more like the one used within Visual Studio 2010 property browser for editing color-typed.

We Need a ColorPicker has that Feeling

One day, we needed a ColorPicker control in our Silverlight project. I found a lot of them, open source and needed to purchase one. None of them was perfect nor had the feeling we wanted. We wanted a color picker like ComboBox or DatePicker. We wanted a color picker that a user can find predefined colors or customize their own ones. The requirement was abandoned finally.

I liked the feeling of the color picker used within VS 2010 property browser. So I created a color picker like it.

Using the ColorPicker

My color picker is very easy to use.

  • Color: The only one special property, get or set current selected color
  • ColorChanged: The only one special event, occurs when the Color property is changed

In the *.xaml file:

<UserControl x:Class="SilverlightControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mine="clr-namespace:SilverlightControls"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White">
        <mine:ColorPicker Height="23" HorizontalAlignment="Left" 
	VerticalAlignment="Top" Margin="50,50" x:Name="colorPicker1" 
	Width="150" Color="Red" ColorChanged="colorPicker1_ColorChanged">
        </mine:ColorPicker>
    </Grid>
</UserControl>

In the *.cs file:

namespace SilverlightControls
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void colorPicker1_ColorChanged
	(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (colorPicker1 != null)
            {
                MessageBox.Show(colorPicker1.Color.ToString());
            }
        }
    }
}

About ColorPicker's Drop-down Part: ColorBoard

I named the drop-down part of my ColorPicker as ColorBoard. There are three parts in ColorBoard.

  • Part 1: The left-top part is the HSV part
  • Part 2: The right-top part is the ARGB part
    About the HSV color model, and the converting between with ARGB color model, you can reference a Wikipedia article. (http://en.wikipedia.org/wiki/HSL_and_HSV)
  • Part 3: The bottom part is the predefined colors part. That is a ComboBox. Current order is windows default order.
    If you want to use alphabet order, comment line 26 in PredefinedColor.cs and uncomment line 29 in the same file.
    In file PredefinedColor.cs.
    // "Aqua" and "Cyan" are same color 
    // (0xFF00FFFF). "Fuchsia" and "Magenta" are same color (0xFFFF00FF).
    
    line 23:    private static void Initialize()
    line 24:    {
    line 25:        // "Aqua" and "Fuchsia" will not be in Dictionary
    line 26:        Initialize_Windows();
    line 27:
    line 28:        // "Cyan" and "Magenta" will not be in Dictionary
    line 29:        //Initialize_Alphabet();
    line 30:    }

How to Draw S-V Rectangle?

This question is the most difficult to resolve. It troubled me for a long time. Set every-point's color? No, that is stupid.

Finally, I got the solution: use two LinearGradientBrushes. One horizontal direction is for saturation(S). And another vertical direction is for Value(V).

<Rectangle x:Name="RectangleRootHSV" Width="80"
Height="80" Stroke="{StaticResource BorderBrush}" StrokeThickness="1">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="#FFFFFFFF" Offset="0" />
            <GradientStop x:Name="GradientStopHSVColor"
            Color="#FFFF0000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<Rectangle x:Name="RectangleHSV" Width="80" Height="80">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#00000000" Offset="0" />
            <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

History

  • Version 1.0 (2010-12-30) - Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Xiaojie Liu
Software Developer (Senior) TechExcel
United States United States
9 years of experience in programming solutions that focused on Visual C#, Visual C++, Visual Basic, and relational database design. Skilled in Object Oriented Programming in C#, Web site development using silverlight and scripting languages for interactive functionality, and networking fundamentals focused on maintaining connectivity and operation of server systems. Information Technology management professional with 5-year background in systems analysis, team leadership, program testing, and problem resolution, as well as personnel administration and professional development.
Now, I'm focusing on Silverlight and Ajax.

Comments and Discussions

 
SuggestionBetter MouseCapture for HSV rectangle PinmemberGeorge I. Birbilis13-Mar-14 14:33 
SuggestionBetter sliders PinmemberGeorge I. Birbilis13-Mar-14 13:46 
GeneralMy vote of 5 PinmemberTaner Riffat11-May-13 19:32 
Questiongo for the suggestions above! PinmemberMathias Benjamin Due Mortensen5-Feb-13 2:31 
QuestionGreat control! Problem with Mouse position Pinmemberrantinori26-Aug-12 10:06 
Suggestion建议 Pinmemberstring.huang31-Jul-12 21:56 
GeneralRe: 建议 [modified] PinmemberGeorge I. Birbilis13-Mar-14 13:09 
Questionhow to add Pinmemberborninmay9012-Mar-12 3:43 
AnswerRe: how to add PinmemberMember 886999523-Apr-12 1:02 
QuestionInstructions on how to integrate? Pinmemberboukaka1-Mar-12 6:59 
QuestionColor picker question Pinmemberski_freak15-Jan-12 6:02 
GeneralMy vote of 5 PinmemberACanadian28-Nov-11 8:55 
GeneralMy vote of 5 Pinmemberkukiatanan2-Nov-11 23:00 
GeneralMy vote of 5 Pingroupprince782720-Sep-11 23:27 
QuestionPrince Pingroupprince782720-Sep-11 23:23 
BugMinor Bug Fixes PinmemberPeet14-Sep-11 4:06 
GeneralRe: Minor Bug Fixes [modified] PinmemberGeorge I. Birbilis13-Mar-14 13:38 
GeneralMy vote of 5 Pinmembermbcrump13-Aug-11 13:04 
GeneralMy vote of 5 PinmemberManfred Radlwimmer10-May-11 10:16 
GeneralExcellent work PinmemberDavid Seruyange3-May-11 12:28 
GeneralMy vote of 5 PinmemberTeoMan15-Mar-11 3:55 
GeneralMy vote of 5 Pinmemberimgen8-Jan-11 17:06 
GeneralPicture please PinmemberSlacker0078-Jan-11 2:33 
GeneralRe: Picture please PinmemberXiaojie Liu9-Jan-11 11:19 
GeneralSome Suggestions PinmvpKunal_Chowdhury8-Jan-11 2:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 8 Jan 2011
Article Copyright 2011 by Xiaojie Liu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid