Over a million developers have joined DZone.

ColorPicker Control for Windows Phone (Coding4Fun)

· Mobile Zone

ColorPicker control is part of the Coding4Fun Toolkit for Windows Phone. You can easily add the color picker functionality to your Windows Phone App by downloading the Coding4Fun Toolkit for Windows Phone and using the ColorPicker control.

What is a ColorPicker?

ColorPicker is a control that displays the different colors and provides a slider kind of functionality for the user to pick the color from the control.

To add the ColorPicker control onto your Windows Phone App, follow the below steps

1. Download Coding4Fun Toolkit from CodePlex website.

2. Add the Coding4Fun controls to the toolbox by selecting the Coding4Fun.Phone.Controls.dll. This should list all the controls available in the Coding4Fun toolkit to your Visual Studio 2010 toolbox.

ColorPicker control for Windows Phone – Picture 1

3. Now, drag and drop the ColorPicker control to the Windows Phone Page.

Alternatively, you can also define the below namespace for the PhoneApplicationPage and reference the controls in your Page .


You could add the control in the XAML page with the following tag

<my:ColorPicker HorizontalAlignment="Left" Margin="6,6,0,0" Name="colorPicker1" VerticalAlignment="Top" Height="532" Width="444" />

ColorPicker control for Windows Phone – Picture 2

The ColorPicker has an event “ColorChanged” which can be used to retrieve the new selected color (is selected) via the argument of type “Color”.

private void colorPicker1_ColorChanged(object sender, Color color)
     textBlock1.Text = color.ToString();

Published at DZone with permission of Senthil Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}