Using Coding4Fun ColorPicker Control in Windows Phone 7


Introduction

In this article we are going to explore how to use the Coding4Fun ColorPicker control in Windows Phone 7. Further in details we will discuss how to work with the ColorPicker control of C4F in Windows Phone 7. In this article we are going to talk about the new ColorPicker control from the free C4F toolkit in details. Here in this scenario we will explain everything about the main features, available public API, and will provide many examples in various scenarios. In this section we see that basically the ColorPicker is an UI component that displays a range of colors in a color space. Whereas another thing is that It consists of a ColorPicker element as well as multiple Rectangle/Ellipse elements. As its name implies it is a kind of extended picker that shows the selected color via its Color property. In this article we will see only a demonstration from which we can learn each and every thing about these controls, so to implement this you have to follow the steps given below, but before starting you have to see my previous article to download these assemblies. Now let's have a look at the properties these controls contain.

Properties

Here we will discuss the properties of the ColorPicker control. So we have some properties as described below which are Color, SolidColorBrush as well. ColorPicker exposes the following public properties which is given below.

  • Color  This is a dependency property of type Color. It determines the current selected Color of the ColorPicker control.
  • SolidColorBrush This is a dependency property of type SolidColorBrush. It determines the current SolidColorBrush color of the ColorPicker control.

Event

Here we will discuss the event of the ColorPicker control which is an individual event given below.

  • ColorChanged It's also an individual event of ColorPicker which occurs when the selected color has changed.

Step 1: In this step first of all we have to open a Windows Phone application; the following describes how to open it:

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named as Silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   

Step_1fig.gif

Step_1_2fig.gif

Step 2: Now in this step first of all we have to add the assemblies reference to the Windows Phone application let's see how to add it:

Step_2_1fig.gif

Step_2_2fig.gif

Step_2_3fig.gif

Step 3: In this step you will see that we have to write the code inside the MainPage.xaml file for the "c4f" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace.

Code: xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit" >

Step 4: In this step you will see that in this example I demonstrate how to use the ColorPicker in the easiest way which is given below.

Code:

<StackPanel>

  <c4fToolkit:ColorPicker  x:Name="colorpicker"  Height="50" Width="233" />

</StackPanel>

 

Step5fig.gif

Step 5: In this step I will demonstrate how to bind the ColorPicker selected Color to a Rectangle Fill property using ElementBinding which is given below.

Code:

<c4fToolkit:ColorPicker x:Name="picker" Height="176" Width="233" ColorChanged="picker_ColorChanged" />

   <TextBlock Text="ColorPicker Color Binding:" FontFamily="Comic Sans MS" FontSize="32" />

<StackPanel Orientation="Horizontal">

  <Rectangle Height="26" Width="253" Fill="{Binding ElementName=picker, Path=SolidColorBrush}" Margin="0,0,20,0"/>

  <Rectangle Height="50" Width="50" x:Name="ColorRect"/>

</StackPanel>

 

Step_4fig.gif

Step 6: In this step we will see how to create a ColorPicker programmatically which is given below.

Code:

private void button1_Click(object sender, RoutedEventArgs e)

{

  ColorPicker Mypicker = new ColorPicker();

  Mypicker.Height = 100;

  Mypicker.Width = 100;

  this.ContentPanel.Children.Add(Mypicker);

}


Step_6fig.gif


Step 7:
In this step we will see the code for the MainPage.xaml.cs file which is given below.

 

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Coding4Fun.Phone.Controls;

namespace Mycolorpicker

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void picker_ColorChanged(object sender, Color color)

        {

            this.ColorRect.Fill = new SolidColorBrush(color);

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            ColorPicker Mypicker = new ColorPicker();

            Mypicker.Height = 100;

            Mypicker.Width = 100;

            this.ContentPanel.Children.Add(Mypicker);

        }

    }

}

 

Step 8: In this step we will see the code for the MainPage.xaml file which is given below.

 

Code:
 

<phone:PhoneApplicationPage

    x:Class="Mycolorpicker.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:c4fToolkit="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>

        <Style TargetType="c4fToolkit:ColorPicker" x:Key="customStyle">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="c4fToolkit:ColorPicker">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto" />

                                <ColumnDefinition Width="*" />

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto" />

                                <RowDefinition Height="*" />

                                <RowDefinition Height="Auto" />

                            </Grid.RowDefinitions>

                            <c4fToolkit:ColorSlider Width="24" Margin="0,0,12,0" IsColorVisible="false" x:Name="ColorSlider" Grid.Row="1"/>

                            <Grid Name="Body" Grid.Column="1" Grid.Row="1">

                                <Rectangle Name="SelectedHueColor" Fill="Red" />

                                <Rectangle>

                                    <Rectangle.Fill>

                                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                                            <GradientStop Offset="0" Color="White"/>

                                            <GradientStop Offset="1" Color="Transparent"/>

                                        </LinearGradientBrush>

                                    </Rectangle.Fill>

                                </Rectangle>

                                <Rectangle>

                                    <Rectangle.Fill>

                                        <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">

                                            <GradientStop Offset="0" Color="Black"/>

                                            <GradientStop Offset="1" Color="Transparent"/>

                                        </LinearGradientBrush>

                                    </Rectangle.Fill>

                                </Rectangle>

                                <Grid Name="SampleSelector" VerticalAlignment="Top" HorizontalAlignment="Left">

                                    <Image Source="pointer.png"  Height="50" Width="50"/>

                                </Grid>

                            </Grid>

                            <Rectangle Margin="0,10,0,12" Height="24" Grid.Row="2" Grid.ColumnSpan="2" Fill="{TemplateBinding SolidColorBrush}" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </phone:PhoneApplicationPage.Resources> 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions> 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="My Color Picker" Style="{StaticResource PhoneTextNormalStyle}" FontFamily="Comic Sans MS" FontSize="36" />

            <!--<TextBlock x:Name="PageTitle" Text="ColorPicker" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>-->

        </StackPanel> 

        <!--ContentPanel - place additional content here-->

        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFFFD8D9" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

            <c4fToolkit:ColorPicker x:Name="picker" Height="176" Width="233" ColorChanged="picker_ColorChanged" />

            <TextBlock Text="ColorPicker Color Binding:" FontFamily="Comic Sans MS" FontSize="32" />

            <StackPanel Orientation="Horizontal">

                <Rectangle Height="26" Width="253" Fill="{Binding ElementName=picker, Path=SolidColorBrush}" Margin="0,0,20,0"/>

                <Rectangle Height="50" Width="50" x:Name="ColorRect"/>

            </StackPanel>

            <TextBlock Text="Customized ColorPicker" FontFamily="Comic Sans MS" FontSize="32" />

            <c4fToolkit:ColorPicker Style="{StaticResource customStyle}" Height="171" Width="259"  />

            <Button Content="Create Color Picker via Code" Height="70" Name="button1" Width="432" FontFamily="Comic Sans MS" FontSize="28" Click="button1_Click">

                <Button.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFFF8D85" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

        </StackPanel>

    </Grid>

</phone:PhoneApplicationPage>

 

Step 9: In this step we will see the design of the MainPage.xaml file which is given below.

 

Designimg.gif

 

Step 10: In this step we are going to run the application and the output regarding this is given below.

 

Output 1: It's the default output which is given below.


out1new.gif

 

Output 2: In this output you will see that whenever you click on the picker then it changes its color including the rectangle and you can customize its color as you prefer which is given below. You will see that the customized ColorPicker's icon will be changed. Add an image (pointer) inside the SampleSelector panel.


Out2new.gif

 

Output 3: In this output you will see that if you want to create the ColorPicker programatically then click on the button; you just see a vertical ColorPicker which is given below.


out3new.gif

 

Here are some other resources which may help you.


A Glimpse of Coding4Fun Button Controls in Windows Phone 7
Working With Coding4Fun Toolkit MetroFlow Control in Windows Phone 7

Getting Started With Coding4Fun Toolkit in Windows Phone 7

Navigation using Windows Phone 7 Silverlight

How to make a Twitter Application using Windows Phone 7