Coding4Fun WP7 ColorHexagonPicker in depth

published on: 6/6/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the new ColorHexagonPicker 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 ColorHexagonPicker is an UI component that displays a range of colors in a color hexagon space.  As its name says it is a kind of extended picker that shows the selected color via its Color property.

Getting Started

To begin using ColorHexagonPicker 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:c4fControls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

The sample code should look like:

<c4fControls:ColorHexagonPicker />

Key Properties

ColorHexagonPicker exposes the following public properties:

• Color

       This is a dependency property of type Color. It determines the current selected Color of the ColorHexagonPicker control.

• ColorBrightnessSteps

       This is a dependency property of type int. It determines the brightness of the colors in ColorHexagonPicker control.

• ColorDarknessSteps

        This is a dependency property of type int. It determines the darkness of the colors in ColorHexagonPicker control.

• ColorSize

       This is a dependency property of type double. It determines the size of the color rectangles in ColorHexagonPicker control.

• GreyScaleSteps

        This is a dependency property of type int. It determines the number of the gray scaled rectangles that are shown below the color hexagon area.

• SolidColorBrush

        This is a dependency property of type SolidColorBrush. It determines the current SolidColorBrush color of the ColorHexagonPicker control.

NOTE: There are two more protected properties GreyScaleBody and ColorBody.

Events

• ColorChanged

This event occurs when the selected color  has changed.

Examples

1. ColorHexagonPicker with different ColorSize

In this example I will demonstrate how to use the ColorHexagonPicker with different ColorSize. Note that ColorSize determines the size of the colored rectangles.

<c4fControls:ColorHexagonPicker ColorSize="5" />
<c4fControls:ColorHexagonPicker ColorBrightnessSteps="1" ColorDarknessSteps="1" ColorSize="30" GreyScaleSteps="0"/>

2. ColorHexagonPicker with different Grey Scales

In this example I will demonstrate how to use the ColorHexagonPicker with different GreyScales. Note that GreyScaleSteps determines the number of the gray scales rectangles that are shown below the color hexagon area. If set to "0" no GrayScale area will appear.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <c4fControls:ColorHexagonPicker  ColorSize="10" GreyScaleSteps="0"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10" GreyScaleSteps="5"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10" GreyScaleSteps="17"/>
</StackPanel>

3. ColorHexagonPicker with different Color Brightness values

In this example I will demonstrate how to control the color brightness variations in a ColorHexagonPicker through the ColorBrightnessSteps property. Setting this property to a lower value results in less color variations i.e. less colors. Correspondingly, setting ColorBrightnessSteps to a greater value results in more color variations i.e. more colors in the hexagon area.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorBrightnessSteps="0"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorBrightnessSteps="4"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorBrightnessSteps="8"/>
</StackPanel>

4. ColorHexagonPicker with different Color Darkness values

In this example I will demonstrate how to control the color darkness variations in a ColorHexagonPicker through the ColorDarknessSteps property. Setting this property to a lower value results in less color variations i.e. less colors. Correspondingly, setting ColorDarknessSteps to a greater value results in more color variations i.e. more colors in the hexagon area.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorDarknessSteps="0"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorDarknessSteps="3"/>
    <c4fControls:ColorHexagonPicker  ColorSize="10"  ColorDarknessSteps="5"/>
</StackPanel>

Note the difference between ColorBrightnessSteps and ColorDarknessSteps! As you can see in the next screenshots the number of the colors are equal but the difference is in the brightness and darkness shades:

<c4fControls:ColorHexagonPicker ColorBrightnessSteps="3" ColorDarknessSteps="0" ColorSize="12" GreyScaleSteps="0"/>
<c4fControls:ColorHexagonPicker ColorBrightnessSteps="0" ColorDarknessSteps="3" ColorSize="12" GreyScaleSteps="0"/>

5. ColorHexagonPicker with NO hexagon area

In this example I will demonstrate how to have a  ColorHexagonPicker NO hexagon area. The only visible part will be the Grey Scale area which you can control through the GreyScaleSteps property of ColorHexagonPicker :

<c4fControls:ColorHexagonPicker ColorBrightnessSteps="0" ColorDarknessSteps="0" ColorSize="12" GreyScaleSteps="30"/>

6. ColorHexagonPicker SolidColorBrush Binding

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

NOTE: For more information about ElementBinding take a look at our previous post: WP7 Element Binding samples

<StackPanel x:Name="ContentPanel">
    <c4fControls:ColorHexagonPicker x:Name="colorHexagonPicker"/>
    <TextBlock Text="ColorPicker Color Binding:"/>
    <Rectangle Height="50" Width="50" Fill="{Binding ElementName=colorHexagonPicker, Path=SolidColorBrush}" />
</StackPanel>

7. ColorHexagonPicker ColorChanged

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

<c4fControls:ColorHexagonPicker x:Name="picker" ColorChanged="picker_ColorChanged" />
<TextBlock Text="ColorPicker Color Binding:"/>
<Rectangle Height="50" Width="50" x:Name="ColorRect"/>

private void picker_ColorChanged(object sender, Color color)
{
    this.ColorRect.Fill = new SolidColorBrush(color);
}

8. Creating ColorHexagonPicker programmatically

In this example I will demonstrate how to create a ColorHexagonPicker programmatically:

private void Button_Click(object sender, RoutedEventArgs e)
{
    ColorHexagonPicker colorHexPicker = new ColorHexagonPicker();
    this.ContentPanel.Children.Add(colorHexPicker);
}

That was all about the ColorHexagonPicker 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 ColorHexagonPicker in depth'

Title Your Name

Comment