×
Namespaces

Variants
Actions
Revision as of 18:11, 27 December 2012 by influencer (Talk | contribs)

Color Picker from Windows Phone Coding4Fun Toolkit

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use the Color Picker 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 7.1
Compatibility
Platform(s): Windows Phone 7.5, 8
Windows Phone 8
Windows Phone 7.5
Article
Created: Vaishali Rawat (15 Dec 2012)
Last edited: influencer (27 Dec 2012)

Contents

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.

ResultColorPicker.PNG

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.

InProgramFiles.png

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.

ReferncingToolkit.png

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.

206 page views in the last 30 days.
×