Using Coding4Fun ColorSlider Control in Windows Phone 7

Amit Maheshwari
Mar 14, 2012

9.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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 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 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:

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

</StackPanel>

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" />

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

</StackPanel>

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

<Setter.Value>

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

<c4fToolkit:SuperSlider.Thumb>

<Grid>

</Grid>

</c4fToolkit:SuperSlider.Thumb>

</c4fToolkit:SuperSlider>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</phone:PhoneApplicationPage.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

</TextBlock.Foreground>

</TextBlock>

</StackPanel>

<StackPanel.Background>

</LinearGradientBrush>

</StackPanel.Background>

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

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

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

</StackPanel>

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

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

<Button.Background>

</LinearGradientBrush>

</Button.Background>

<Button.BorderBrush>

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

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.

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.