Color Picker control in Windows Phone

Comments

Influencer - Subedited

Hi Vaishali,

I subedited your article for typos and added the UI category. Please take a look.

Thomas

influencer 17:12, 27 December 2012 (EET)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:Color_Picker_Control.zip‎ -->

---

Tested with

SDK: Windows Phone 7.1

---

Compatibility

Platform(s): Windows Phone 7.5, 8

---

Article

Created: Vaishali Rawat (15 Dec 2012)

Last edited: hamishwillee (29 Apr 2013)

Introduction

At times it is required to use a Color Picker control in the apps. Windows Phone SDKs so far don't provide this control. The Coding4Fun Toolkit library however provides a Color Picker control. 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 color of the grid as per the color selected by the Color Picker control.

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.