Color Selector Control（转）

How to Use the Color Selector Control

To use the Color Selector control you will need to add a reference to Liquid.dll in your project.

To use the Color Selector on your Silverlight page:

<UserControl x:Class="ColorSelector.Page"

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

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

    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"

    Width="400" Height="300">

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

        <liquid:ColorSelector x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />

    </Grid>

</UserControl>

 

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

namespace ColorSelector

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

        }

        private void selectColor_SelectionChanged(object sender, EventArgs e)

        {

            LayoutRoot.Background = new SolidColorBrush(selectColor.Selected);

        }

    }

}

 

In this example we create a single Color Selector named selectColor, with this created we attach an event handler to the SelectionChanged event, this is handled in the C# below.

In the above C# we set the background color when the SelectionChanged event of the Color Selector occurs.

Example Silverlight Color Selector Control:

 

 

Customizing the Color Selector With Styles

The Color Selector control can be skinned using the standard Silverlight 2 method of setting Styles in the App.xaml file of your Silverlight project.

Example of how to Apply a Skin to the Color Selector

These styles are placed in your XAML and referred to using the Style property:

    <Style TargetType="local:ColorSelector">

        <Setter Property="Width" Value="50" />

        <Setter Property="Height" Value="23" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="local:ColorSelector">

                    <local:DropDown x:Name="RootElement">

                        <local:DropDown.SelectedItemContent>

                            <local:ColorItem x:Name="ElementSelectedColor" IsHitTestVisible="False" />

                        </local:DropDown.SelectedItemContent>

                        <local:ItemViewer x:Name="ElementViewer" Width="168" VerticalAlignment="Top" VerticalScrollBarVisibility="Hidden" />

                    </local:DropDown>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

 

 

As you can see, styling is a powerful method of customizing the controls to suite the look and feel of your Silverlight application.

  

  

  

  

Silverlight Color Selector Reference

The Color Selector exposes several properties for controlling various aspects of the Color Selector and its behaviour.

Properties for Liquid.ColorSelector

Below are the available properties complete with descriptions.

Property Name	Type	Description
OpenPosition	DropDownPosition	Gets or sets the opening position.

 

Methods for Liquid.ColorSelector

Below are the available methods, complete with parameters and descriptions.

Method Name	Description	Parameters
Clear()	Clears all colors from the selector.
ClearCustom()	Clears all colors from the selector.
Add(Color)	Adds a color to the selector.	Parameters color Color to add
Add(Color, Boolean)	Adds a color to the selector.	Parameters color Color to add
Set(UInt32[], Boolean)	Sets a bulk set of colors.	Parameters colors An array containing the colors
OnApplyTemplate()	This is called when the template has been bound to the control.

 

  

 

 

 

 

 

Implementing Custom Colors

The Color Picker has a More Colors button allowing the user to select a color that is not available in the standard color set.  In this example we will use a color picker found here and show it in a Dialog when the More Colors button is clicked.

Download these Silverlight Controls for free now! Download example  

 

When the Custom Colors button is clicked we show our Color Picker dialog.

<UserControl x:Class="ColorSelectorCustomButton.MainPage"

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

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

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

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

    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"

    xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"

    xmlns:custom="clr-namespace:ColorSelectorCustomButton"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">

        <liquid:ColorSelector x:Name="selectColor" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" SelectionChanged="selectColor_ItemSelected" CustomClick="selectColor_CustomClick" />

        <liquidPopup:Dialog x:Name="colorPickerDialog" Width="340" Height="390" Title="Color Picker" Buttons="OK,Cancel" IsMaximizeEnabled="False" Closed="colorPickerDialog_Closed">

            <custom:ColorPicker x:Name="colorPicker" Margin="2" />

        </liquidPopup:Dialog>

    </Grid>

</UserControl>

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

namespace ColorSelectorCustomButton

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

        private void selectColor_ItemSelected(object sender, EventArgs e)

        {

            // Do something with the selected color

            Color color = selectColor.Selected;

            LayoutRoot.Background = new SolidColorBrush() { Color = color };

        }

        private void selectColor_CustomClick(object sender, RoutedEventArgs e)

        {

            // Show our color picker dialog

            colorPickerDialog.ShowAsModal();

        }

        private void colorPickerDialog_Closed(object sender, DialogEventArgs e)

        {

            if (colorPickerDialog.Result == DialogButtons.OK)

            {

                uint col = (uint)((colorPicker.Selected.A << 24) | (colorPicker.Selected.R << 16) | (colorPicker.Selected.G << 8) | colorPicker.Selected.B);

                

                // Assign the custom color to the next slot

                ColorSelector.Custom[ColorSelector.NextCustomSlot] = col;

                // Update the custom colors

                selectColor.Set(ColorSelector.Custom.ToArray(), true);

                // Update the selected color

                selectColor.Select(colorPicker.Selected);

            }

        }

    }

}

 

The colorPickerDialog_Closed event handler is responsible for setting the custom color in the Color Selector control and adding it to the custom colors list.