Introduction

Color Picker Control is a menu driven control for selecting a color of choice. This control is often provided by 3rd party control providers. In this article we will see how we can make our own control to look like Office 2007 or 2010 styled Color Picker Control.

Requirements to build the application

We need to have the following tools to proceed:

• Visual Studio 2010
• Silverlight 4
• Expression Blend 4

Creating the Silverlight Application

Fire up Visual Studio 2010, create a Silverlight Application and select the version as .Net Framework 4. Give the solution a name such as ColorPickerControlSL4.

As soon as the solution is created for you; we would add a UserControl to the Silverlight project. Name it as ColorPickerControl.

We will use Expression Blend extensively now, so that our Color Picker would look like the real Color Picker Controls provided by 3rd party vendors.

Open the UserControl in Expression Blend. Before opening the UserControl in Blend, I had removed the default ignorable width and height properties from it. So that when it opens in Blend it would have Auto sized width and height.

First thing we need to create is a ToggleButton, which would have the menu like arrow. To do those add two Borders one inside another.

The first border height and width should be 20 each and the inside border's height and width would be 7 each. The background of the Outer Border would be bind to the selected color, which we will discuss at the end of the article.

Now make the above structure into a ToggleButton, name the Style as the default one: ToggleButtonStyle1. And define the style in the same document.

Now we would need a PopUp control which would contain our Color Palette. To add a PopUp control simply search in the asset Tool. The reason behind we need PopUp control is we can bind the IsChecked property to IsOpen property so that it would pop open when there is a IsChecked change for Toggle Button.

Add the PopUp Control after the ToggleButton, now when you add the control it comes with a Grid panel inside it. Group the Grid inside a Border and set the width and height of the Border as 198 and 155 pixels. Make the background of the grid to White.

Also pull the position of the PopUp down so that it remains under the ToggleButton. After you do the above simple steps, it would be previewed like te following.

Now inside the Grid add a Border with Horizontal and Vertical Alignment as Stretch both. And then add a StackPanel inside the Border which would have the Orientation as Vertical.

As you see in the above image, StatckPanel is the final panel that would have the color palettes and other display blocks.

Let's add the Labels, "Theme Colors" and "Standard Colors". To do this: add a Border of height 23 pixel and add a DockPanel inside it. Then add a Label Control inside it.

Now let's create Color Button Style for the First Row of Color Palette.

To do that add Two Borders one inside the other. The outer Border's width and height be 13 each and the inside Border's width and height be 12 each. Change the inside Border's BorderThickness to 0 and Brush be NoBrush.

Make the ButtonControl style with key Name: "SingleRowButtonStyle".

Remove the ContentPresenter after the control is created. And Change the Outer Border's BorderBrush to the Color #FFD0D0D0 (LightGray Color).

Now we need to change the Background brush of Inner Border to the TemplateBinding with the Background of the Control.

After doing that change, the background would be bind to the Brush and it would come as the default GrayBlue background. That's fine. Now whatever color you are going to change would reflect the inner Border's Background.

The above layout settings required for the StackPanel that would contain the Color Buttons. And then add several buttons and the setting would be as following:

Add 10 Buttons to the StackPanel, and change the Colors. It would complete the first Row and it would be previewed as following: Remember that the background has to be changed manually.

Now we will add other rows, and change the styles accordingly. Remember that we need one more style of the Button, so that the outer border's border thickness of the top and bottom can be removed.

Now add the 2nd row for "Standard Colors" and then the last Row and a set of colors for it.

Looking good, right. But not complete. Now we need to add the MouseOver effect for the Color Button.

Open each Button style you have created and open it for edit. On States tab, select the MouseOver State and you can see the recording is on notification. Now change the Border Brush to something hight light in color and add the Border Thickness 1 to each side.

Note that, the changes you are doing in recording on mode are not reflected for base states, so the Border Thickness would remain same as we styled before.

Now that we have changed the MouseOver effect. We need to add the events for the Buttons.

As we discused in the beginning of the article, we need the binding of the PopUp with Toggle Button.

We need to change the DataBinding of the IsOpen of the PopUp control to the ToggleButons's IsChecked property.

Now we will create a Dependency Property, so that when the color is changed it would reflect the color to the new DP and can be used for Drawing or writing text.

So create a DP with name: "SelectedColor"

And also we need to change the color on Color Click, so add the two lines of code as mentioned below:

Now we need to Bind the Color of the selected to the ToggleButton's Template's Outer Border Background:

Now we are ready to have a test run, add the UserControl to the MainPage.xaml :

You can use the control for Drawing strokes, writing in Font Color and lot more.

Conclusion

We have successfully created the Color Picker Control which is similar to the Office 2007 or 2010 style. You can change color palette, based on your requirement if you need. Also we can add another menu for displaying Add More Colors to define the set of colors we need.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Adding Event	Andrew Bowne	7/5/2011 8:25 AM
Awesome Control!  I have found great use for it in many of my projects. One thing that would be of great benefit would be an event for OnSelectedColorChanged.  Is there any way this could be added? Reply | Permanent link

---

Please login to rate or to leave a comment.