Coding4Fun WP7 ColorSlider in depth

published on: 5/23/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the new ColorSlider control from the FREE Coding4fun Toolkit in details. I will explain everything about the main features, available public API, and will  give lots of examples in different scenarios.

Basically 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 ColorBaseControl and shows the selected color via its Color property.

Getting Started

To begin using ColorSlider first  add a reference to  the Coding4Fun.Phone.Controls.dll assembly.

NOTE: You can download this assembly from here: Coding4Fun Toolkit .

The next step is to add the "c4fToolkit" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace:

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

The sample code should looks like:

<c4fToolkit:ColorSlider/>

Key Properties

ColorSlider exposes the following public properties:

• Color

       This is a dependency property of type Color. It determine the current selected Color of the ColorSlider control.

• SolidColorBrush

        This is a dependency property of type SolidColorBrush. It determine the current SolidColorBrush color of the ColorSlider control.

• Orientatio

This is a dependency property of type Orientation. It determine the current Orientation of the ColorSlider control.

• IsColorVisible

This is a dependency property of type bool. It determine whether the Color is visible or not.

Events

• ColorChanged

This event occurs when the selected color  has changed.

Examples

Example1: Sample usage

In this example I will demonstrate how to use the ColorSlider in the easiest way.

<StackPanel>
    <c4fToolkit:ColorSlider Orientation="Horizontal" Height="50" />
</StackPanel>

Example2:Vertical orientation

In this example I will demonstrate how to use the ColorSlider in Vertical orientation:

<StackPanel>
    <c4fToolkit:ColorSlider Orientation="Vertical"  Width="50" Height="300" />
</StackPanel>

 

Example3: ColorSlider SolidColorBrush Binding

In this example I will demonstrate how to Bind ColorSlider selected Color to a Rectangle Fill property using ElementBinding.

<c4fToolkit:ColorSlider x:Name="colorSlider" Orientation="Horizontal"  Height="50" />
<StackPanel HorizontalAlignment="Left">
    <TextBlock>Via Binding:</TextBlock>
    <Rectangle Height="50" Width="50" Fill="{Binding ElementName=colorSlider, Path=SolidColorBrush}" />
</StackPanel>

Example4:ColorSlider ColorChanged

In this example I will demonstrate how to display ColorSlider selected Color in a Rectangle using ColorChanged event .

<c4fToolkit:ColorSlider x:Name="colorSlider" Orientation="Horizontal" ColorChanged="ColorSlider_ColorChanged" Height="50" />
<StackPanel HorizontalAlignment="Left">
    <TextBlock>Via Event:</TextBlock>
    <Rectangle Name="rect" Height="50" Width="50" />
</StackPanel>

private void ColorSlider_ColorChanged(object sender, System.Windows.Media.Color color)
{
    this.rect.Fill = new SolidColorBrush(color);
}

Example5: Creating ColorSlider programmatically

n this example I will demonstrate how to create a ColorSlider programmatically:

ColorSlider slider = new ColorSlider();
slider.Orientation = System.Windows.Controls.Orientation.Horizontal;
slider.Height = 50;
slider.Width = 200;
this.ContentPanel.Children.Add(slider);

Example6: Customizing ColorSlider Style

In this example I will demonstrate how to customize the Style of the ColorSlider . At first we will add an image (pointer) inside theSuperSlider Thumb(this is an element from the below ControlTemplate). Next I will set the newly created style using Style="{StaticResource CustomSlider}" . In a similar way just by modifying the default Style you can customize the ColorSlider control in various ways.

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

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

That was all about the ColorSlider control from the Coding4fun Toolkit in depth.  You can find the full source code here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Coding4Fun WP7 ColorSlider in depth'

Title Your Name

Comment