Click here to Skip to main content
15,866,398 members
Articles / Programming Languages / C# 4.0

Silverlight ColorPicker

Rate me:
Please Sign up or sign in to vote.
5.00/5 (18 votes)
8 Jan 2011CPOL2 min read 251.4K   3.8K   16   25
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:

XML
<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:

C#
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.
    C#
    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).

XML
<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)


Written By
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 Pin
George I. Birbilis13-Mar-14 14:33
George I. Birbilis13-Mar-14 14:33 
SuggestionBetter sliders Pin
George I. Birbilis13-Mar-14 13:46
George I. Birbilis13-Mar-14 13:46 
GeneralMy vote of 5 Pin
Taner Riffat11-May-13 19:32
Taner Riffat11-May-13 19:32 
Questiongo for the suggestions above! Pin
Mathias Benjamin Due Mortensen5-Feb-13 2:31
Mathias Benjamin Due Mortensen5-Feb-13 2:31 
QuestionGreat control! Problem with Mouse position Pin
rantinori26-Aug-12 10:06
rantinori26-Aug-12 10:06 
Suggestion建议 Pin
string.huang31-Jul-12 21:56
string.huang31-Jul-12 21:56 
GeneralRe: 建议 Pin
George I. Birbilis13-Mar-14 13:09
George I. Birbilis13-Mar-14 13:09 
Questionhow to add Pin
borninmay9012-Mar-12 3:43
borninmay9012-Mar-12 3:43 
AnswerRe: how to add Pin
Member 886999523-Apr-12 1:02
Member 886999523-Apr-12 1:02 
QuestionInstructions on how to integrate? Pin
boukaka1-Mar-12 6:59
boukaka1-Mar-12 6:59 
QuestionColor picker question Pin
ski_freak15-Jan-12 6:02
ski_freak15-Jan-12 6:02 
GeneralMy vote of 5 Pin
ACanadian28-Nov-11 8:55
ACanadian28-Nov-11 8:55 
GeneralMy vote of 5 Pin
kukiatanan2-Nov-11 23:00
kukiatanan2-Nov-11 23:00 
GeneralMy vote of 5 Pin
prince782720-Sep-11 23:27
prince782720-Sep-11 23:27 
QuestionPrince Pin
prince782720-Sep-11 23:23
prince782720-Sep-11 23:23 
BugMinor Bug Fixes Pin
Peet14-Sep-11 4:06
Peet14-Sep-11 4:06 
GeneralRe: Minor Bug Fixes Pin
George I. Birbilis13-Mar-14 13:38
George I. Birbilis13-Mar-14 13:38 
indeed, will add this to my updated version of this control (see Client/ColorPicker under codebase of http://clipflair.codeplex.com). I use a default value for the Color property too, but preferred to use Colors.Transparent there, not Colors.White

seems this fix of yours is needed in 2 places, that is for the ColorPicker and for the preview item (for the second combobox)

BTW, I've managed to port this to WPF too and use the same sourcecode in both WPF and Silverlight (using linked files in the respective projects), but in WPF I can't manage to show the popup. Any idea what's wrong with it? (see the WPF demo there)
Computer & Informatics Engineer
Microsoft MVP J# 2004-2010
Borland Spirit of Delphi 2001
QuickTime, QTVR, Delphi VCL,
ActiveX, COM, .NET, Robotics
http://zoomicon.com
http://zoomicon.wordpress.com


modified 13-Mar-14 19:59pm.

GeneralMy vote of 5 Pin
mbcrump13-Aug-11 13:04
mentormbcrump13-Aug-11 13:04 
GeneralMy vote of 5 Pin
Manfred Radlwimmer10-May-11 10:16
Manfred Radlwimmer10-May-11 10:16 
GeneralExcellent work Pin
David Seruyange3-May-11 12:28
David Seruyange3-May-11 12:28 
GeneralMy vote of 5 Pin
TeoMan15-Mar-11 3:55
TeoMan15-Mar-11 3:55 
GeneralMy vote of 5 Pin
imgen8-Jan-11 17:06
imgen8-Jan-11 17:06 
GeneralPicture please Pin
Slacker0078-Jan-11 2:33
professionalSlacker0078-Jan-11 2:33 
GeneralRe: Picture please Pin
Xiaojie Liu9-Jan-11 11:19
Xiaojie Liu9-Jan-11 11:19 
GeneralSome Suggestions Pin
Kunal Chowdhury «IN»8-Jan-11 2:32
professionalKunal Chowdhury «IN»8-Jan-11 2:32 

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

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