关于WP7中的颜色选择器

我们在做winform程序时常常会用到一个颜色选择框，但在WP7中没有提供这个类供我们调用，今天看到一个开源项目coding4Fun，下面就介绍一下这个六边形的颜色选择框使用方法：

首先下载到我们所要用到dll包，地址会在博文后面给出。在VS2010新建一个项目，然后添加引用

然后在MainPage.xaml文件头添加命名空间声明

接下来在需要添加六边形颜色选择框的地方直接添加以下代码：

<c4fControls:ColorHexagonPicker />

效果如下：

Coding4Fun针对这个六边形颜色提取器提供了以下几个属性：

• Color

　　这是一个颜色独立属性，它决定了当面颜色选择器中的颜色选择结果。类型为Color

• ColorBrightnessSteps

　　颜色亮度步长，类型为int

• ColorDarknessSteps

　　颜色暗度步长，类型为int

• ColorSize

　　颜色选择矩形框的大小，类型Double

• GreyScaleSteps

　　灰度值的步长，类型int

• SolidColorBrush

　　当前选择的颜色画刷

下面是一个例子，大家可以对照代码看看效果：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <c4fControls:ColorHexagonPicker  ColorSize="10" ColorBrightnessSteps="3" Margin="-147,22,147,75" Height="510" Width="456" />
            <c4fControls:ColorHexagonPicker  ColorSize="10" ColorBrightnessSteps="5" Margin="9,22,-9,75" Height="510" Width="456" />
            <c4fControls:ColorHexagonPicker  ColorSize="10" ColorDarknessSteps="3" Margin="-125,210,125,-113" Height="510" Width="456" />
            <c4fControls:ColorHexagonPicker  ColorSize="10" ColorDarknessSteps="5" Margin="53,210,-53,-113" Height="510" Width="456" />
            <c4fControls:ColorHexagonPicker  ColorSize="10" GreyScaleSteps="3" Margin="-125,416,125,-319" Height="510" Width="456" />
            <c4fControls:ColorHexagonPicker  ColorSize="10" GreyScaleSteps="5" Margin="76,441,-76,-344" Height="510" Width="456" />
</Grid>

要设置没有六边形颜色选择区域，请看下面代码：

<c4fControls:ColorHexagonPicker ColorSize="20" ColorDarknessSteps="0" ColorBrightnessSteps="0" Margin="94,260,-94,-163" Height="510" Width="456" />

接下来是一个颜色画刷绑定的例子。

前台绑定：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <c4fControls:ColorHexagonPicker ColorSize="20" Name="ColorPicker" Margin="-6,6,6,91" Height="510" Width="456" />
            <Rectangle Height="80" HorizontalAlignment="Left" Fill="{Binding ElementName=ColorPicker,Path=SolidColorBrush}" Margin="143,366,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="146" />
            <TextBlock FontSize="30" Height="40" HorizontalAlignment="Left" Margin="12,366,0,0" Name="textBlock1" Text="颜色绑定：" VerticalAlignment="Top" Width="125" />
</Grid>

利用ColorChanged事件进行后台绑定实现：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <c4fControls:ColorHexagonPicker ColorSize="20" Name="ColorPicker" ColorChanged="ColorPicker_ColorChanged" Margin="-6,6,6,91" Height="510" Width="456" />
            <Rectangle Height="80" HorizontalAlignment="Left" Margin="143,366,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="146" />
            <TextBlock FontSize="30" Height="40" HorizontalAlignment="Left" Margin="12,366,0,0" Name="textBlock1" Text="颜色绑定：" VerticalAlignment="Top" Width="125" />
</Grid>

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

源项目地址：coding4Fun