Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Color Picker from Windows Phone Coding4Fun Toolkit

From Wiki
Jump to: navigation, search

This article explains how to use the ColorPicker control provided by Coding4Fun Toolkit in Windows Phone.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0/7.1
Devices(s): Nokia Lumia 920
Platform(s): Windows Phone 8.0/ 7.5
Windows Phone 8
Windows Phone 7.5
Created: Vaishali Rawat (15 Dec 2012)
Reviewed: Vaishali Rawat (27 May 2013)
Last edited: hamishwillee (02 Jul 2013)



The official Windows Phone SDKs don't (at time of writing) provide a control for picking a colour. Fortunately the Coding4Fun Toolkit does provide the ColorPicker control for this purpose.

This article explains how to use the Coding4Fun Toolkit Color Picker control in a Windows Phone application. To show its usage, we will set the background colour of the grid as per the colour selected by the Color Picker control.



  • We need to have a reference to Coding4Fun Toolkit.

Downloading & installing the Coding4Fun Toolkit

Below mentioned are the steps to be followed to download and install the Toolkit. Please skip these steps if you have already installed the Toolkit.

  • Go to this site and download the toolkit.
  • Go to the C drive > Program Files in your system and make a folder named (e.g.) "Coding4Fun Toolkit".
  • Unzip the file you downloaded in step 1, copy all the files and then place them in the above created new folder.

Getting Started

First create a Windows Phone application.

  • Open Visual Studio and select Windows Phone Application from the installed templates.
  • Select Windows Phone 7.1 as the Target Version.
  • Right-click on the References in the project and click Add Reference. Browse the system to go to the folder Coding4Fun Toolkit and select all the assembly files.

Design Page

  • Place the color picker control in the main page and add the following namespace in the page declaration:
    xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit" >
  • The control itself can be added by:
    <c4fToolkit:ColorPicker x:Name="picker" Height="176" Width="233" ColorChanged="picker_ColorChanged" />

The Color Picker control has an event (named as ColorChanged event) associated with it which gets fired every time the color changes in the Color Picker control. So, we have above declared its event handler as well.

Code Behind

Our purpose here is only to change the background color of the main grid whenever the color is changed in Color Picker control. To do so, we will handle the ColorChanged event as shown below:

private void picker_ColorChanged(object sender, Color color)
ContentPanel.Background = new SolidColorBrush(color);

This is it! Now build the project and run it. The background color of the grid should change as you change the color in Color Picker control.

NOTE: This sample application was build in Windows Phone 7.1 SDK. It is supposed to work in Windows Phone 8.

This page was last modified on 2 July 2013, at 05:28.
134 page views in the last 30 days.