Using Coding4Fun ColorSlider Control in Windows Phone 7


Introduction

In this article we are going to explore how to use the Coding4Fun control in Windows Phone 7. Further in details we will discuss how to work with a ColorSlider control of C4F in Windows Phone 7. Further in this article we are going to talk about the new ColorSlider 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  give lots of examples in different scenarios. In this section we see that basically the ColorSlider is an UI component that displays a range of colors in a color sliding space. It is a kind of extended color picker which derives from the ColorBaseControl and shows the selected color via its Color property. In this article we will see only a demonstration with which we can learn everything about these controls, So to implement such type of functionality 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 property containing by these controls is given below.

Properties

Here we will discuss about the properties of the ColorSlider control. So we have some properties of that is given below which are Color, SolidColorBrush, Orientation and IsColorVisible as well.

  • Color It's also a property of the ColorSlider which is a dependency property of type Color. It determines the current selected Color of the ColorSlider control.
  • SolidColorBrush It's also a property of a ColorSlider which is a dependency property of type SolidColorBrush. It determines the current SolidColorBrush color of the ColorSlider control.
  • Orientatio It's also a property of a ColorSlider which is a dependency property of type Orientation. It determine the current Orientation of the ColorSlider control.
  • IsColorVisible It's also an property of ColorSlider which is a dependency property of type bool. It determine whether the Color is visible or not.

Event

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

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

Step 1: In this step, first of all we have to open a Windows Phone application; let's see how you will 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 will you 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 will demonstrate how to use the ColorSlider in the easiest way which is given below.

Code:

<StackPanel>

  <c4fToolkit:ColorSlider  x:Name="colorSlider" Orientation="Horizontal"  Height="50" />

</StackPanel>


Step_4fig.gif

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

Code:

<c4fToolkit:ColorSlider  x:Name="colorSlider" Orientation="Horizontal"  Height="50" />

<StackPanel HorizontalAlignment="Left">

  <TextBlock FontFamily="Comic Sans MS" FontSize="32">Via Binding:</TextBlock>

    <Rectangle Height="50" Width="50" Fill="{Binding ElementName=colorSlider, Path=SolidColorBrush}" />

</StackPanel>


Step_5_fig.gif

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

Code:

ColorSlider My_clrslider = new ColorSlider();

My_clrslider.Orientation = System.Windows.Controls.Orientation.Vertical;

My_clrslider.Height = 300;

My_clrslider.Width = 40;

this.ContentPanel.Children.Add(My_clrslider);

 

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 mycolorslider

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            ColorSlider MycolorSlider = new ColorSlider();

        }

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            ColorSlider My_clrslider = new ColorSlider();

            My_clrslider.Orientation = System.Windows.Controls.Orientation.Vertical;

            My_clrslider.Height = 300;

            My_clrslider.Width = 40;

            this.ContentPanel.Children.Add(My_clrslider);

        }

    }

}

 

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

 

Code:

 

<phone:PhoneApplicationPage

    x:Class="mycolorslider.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:ColorSlider" x:Key="CustomSlider">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="c4fToolkit:ColorSlider">

                        <Grid Name="Body">

                            <Rectangle Name="SelectedColor" Fill="{TemplateBinding SolidColorBrush}" />

                            <c4fToolkit:SuperSlider x:Name="Slider" Orientation="{TemplateBinding Orientation}" Fill="Transparent" Minimum="0" Maximum="254">

                                <c4fToolkit:SuperSlider.Thumb>

                                    <Grid>

                                        <Image Source="triangle.png"  Margin="0,33,0,0"/>

                                    </Grid>

                                </c4fToolkit:SuperSlider.Thumb>

                            </c4fToolkit:SuperSlider>

                        </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="PageTitle" Text="My color slider" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"

                       FontFamily="Comic Sans MS" FontSize="64">

                  <TextBlock.Foreground>

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

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

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

                     </LinearGradientBrush>

                  </TextBlock.Foreground>

            </TextBlock>

        </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="#FFFFC1CE" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

            <TextBlock FontFamily="Comic Sans MS" FontSize="32">ColorSlider:</TextBlock>

            <c4fToolkit:ColorSlider  x:Name="colorSlider" Orientation="Horizontal"  Height="50" />

            <StackPanel HorizontalAlignment="Left">

                <TextBlock FontFamily="Comic Sans MS" FontSize="32">Via Binding:</TextBlock>

                <Rectangle Height="50" Width="50" Fill="{Binding ElementName=colorSlider, Path=SolidColorBrush}" />

            </StackPanel>

            <TextBlock FontFamily="Comic Sans MS" FontSize="32">Customized ColorSlider:</TextBlock>

            <c4fToolkit:ColorSlider Style="{StaticResource CustomSlider}" x:Name="colorSlider1" Orientation="Horizontal" Height="50" />

            <Button Content="Create ColorSlider via code" x:Name="Button" Click="Button_Click" FontFamily="Comic Sans MS" FontSize="32">

                <Button.Background>

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

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

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

                    </LinearGradientBrush>

                </Button.Background>

                <Button.BorderBrush>

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

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

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

                    </LinearGradientBrush>

                </Button.BorderBrush>

            </Button>

        </StackPanel>

    </Grid>

</phone:PhoneApplicationPage>

 

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

 

Step_9fig.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.


Out1.gif

 

Output 2: In this output you will see that whenever you click on the slider then it changes its color with rectangle as well and you can customize its color as you wish which is given below.


out2.gif

 

Output 3: In this output you will see that if you want to create the ColorSlider programatically then click on the button; you just see a vertical ColorSlider 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