Codeing4Fun控件解析Color系列

Comments

(no comments yet)

Log in or Join to leave comments.

文章信息

---

代码示例

源文件: Media:Coding4FunColorDemo.zip

---

文章

由 WS - OtomiiLu 在 24 Sep 2012 创建

最后由 hamishwillee 在 30 Nov 2012 编辑

在Windows Phone 7的开发中,我们不仅仅拥有微软官方提供的原始的控件,还有CodePlex提供的一套Toolkit.但是,在日常开发中,这些控件往往是不够的,这里,我将会讨论如何使用另外一套第三方控件Coding4Fun.

Coding4Fun也是一套很有名的控件,他追寻的是Microsoft Public License (Ms-PL), MS-PL 授权使用者可以自由修改、重制与散布该软体. 那么接下来,我们就进行这个控件的介绍:

引用控件

首先,我建议使用NuGet来安装整个控件. 打开Tools->Extension Manager->Online,在搜索框中输入NuGet,然后Download.

然后重启VS, 打开View->Other Windows->Package Manager Console. 在打开的Window中输入:

Install-Package Coding4Fun.Phone.Controls.Complete即可完成控件的引用,你会获得以下数据:

PM> Install-Package Coding4Fun.Phone.Controls.Complete
正在尝试解析依赖项“Coding4Fun.Phone.Audio”。
正在尝试解析依赖项“Coding4Fun.Phone.Net”。
正在尝试解析依赖项“Coding4Fun.Phone.Storage”。
正在尝试解析依赖项“Coding4Fun.Phone.Controls”。
正在尝试解析依赖项“Coding4Fun.Phone.Controls.TimeSpan”。
正在尝试解析依赖项“SilverlightToolkitWP”。
已成功安装“Coding4Fun.Phone.Audio 1.6.1”。
已成功安装“Coding4Fun.Phone.Net 1.6.1”。
已成功安装“Coding4Fun.Phone.Storage 1.6.1”。
已成功安装“Coding4Fun.Phone.Controls 1.6.1”。
已成功安装“SilverlightToolkitWP 4.2012.6.25”。
已成功安装“Coding4Fun.Phone.Controls.TimeSpan 1.6.1”。
已成功安装“Coding4Fun.Phone.Controls.Complete 1.6.1”。
已成功将“Coding4Fun.Phone.Audio 1.6.1”添加到 Coding4FunDemoInOne。
已成功将“Coding4Fun.Phone.Net 1.6.1”添加到 Coding4FunDemoInOne。
已成功将“Coding4Fun.Phone.Storage 1.6.1”添加到 Coding4FunDemoInOne。
已成功将“Coding4Fun.Phone.Controls 1.6.1”添加到 Coding4FunDemoInOne。
已成功将“SilverlightToolkitWP 4.2012.6.25”添加到 Coding4FunDemoInOne。
已成功将“Coding4Fun.Phone.Controls.TimeSpan 1.6.1”添加到 Coding4FunDemoInOne。
已成功将“Coding4Fun.Phone.Controls.Complete 1.6.1”添加到 Coding4FunDemoInOne。

同时,Coding4Fun还有另外几种命令,区别于Complete安装: 一种是不包括TimeSpan的: Install-Package Coding4Fun.Phone.Controls 一种是只有TimeSpan的: Install-Package Coding4Fun.Phone.Controls.TimeSpan

然后，我们需要通过以下代码来为我们的XAML页面添加我们需要的NameSpace：

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

ColorSlider控件

首先我们介绍的是ColorSlider主要是用于颜色的选择，提供的是一种通过Slider直接选择颜色的方式，具体如下图所示：

可以发现，很简单的一个颜色的Slider，我们可以通过拖动托快来选择我们需要的颜色。 具体代码如下：

<Coding4Fun:ColorSlider Color="Red" x:Name="colorSlider" Orientation="Horizontal" Height="25" />
<Rectangle Height="20" Width="100" HorizontalAlignment="Left"
                    Fill="{Binding ElementName=colorSlider, Path=SolidColorBrush}" />

通过一个Rectangle来绑定我们的颜色，然后动态的显示，当然，滑块也是可以可以通过如下代码换的：

<Coding4Fun:ColorSlider.Thumb>
<Ellipse Fill="Black" Width="12" />
</Coding4Fun:ColorSlider.Thumb>

换后如下图:

ColorPicker控件

ColorPicker控件主要是用于颜色的精确的选择，提供的是一种通过一个竖直的ColorSlider来选择颜色，然后提供一个Panel来选择具体的亮度和饱和度，具体如下图所示：

当我们选择好我们需要的颜色后，然后再在右边的Panel里选择我们需要的亮度和饱和度。

<Coding4Fun:ColorPicker Color="Red" Height="124" Name="colorPicker" />
<Rectangle Height="20" Width="100" HorizontalAlignment="Left"
                    Fill="{Binding ElementName=colorPicker, Path=SolidColorBrush}" />

ColorPicker控件，也会是我们最常用的选择颜色的控件，通过两个Panel的点选，我们可以简单的获得我们需要的颜色，同时，这个控件几乎是提供了所有颜色的选择。

ColorHexagonPicker控件

ColorHexagonPicker控件提供了一种按块选择颜色的方式，具体的形式如下：

具体的代码如下:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <StackPanel Margin="0,0,0, 12">
                    <Grid Height="150">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Coding4Fun:SuperSlider Grid.Column="0" Name="colorBrightSteps" Title="color brightness steps"
                                BarHeight="12" Step="1" Value="2" Minimum="0" Maximum="6" />
                        <Coding4Fun:SuperSlider Grid.Column="1" Name="colorDarkSteps" Title="color darkness steps"
                                BarHeight="12" Step="1" Value="2" Minimum="0" Maximum="6" />
                        <Coding4Fun:SuperSlider Grid.Row="1" Name="greySteps" Title="grey steps" BarHeight="12" Step="1"
                                Value="15" Minimum="0" Maximum="25" />
                        <Rectangle Grid.Column="1" Grid.Row="1" Height="30" Width="100"
                                Fill="{Binding ElementName=colorHexagonPicker, Path=SolidColorBrush}" />
                    </Grid>
 
                </StackPanel>
                <Grid VerticalAlignment="Bottom">
                    <Coding4Fun:ColorHexagonPicker Name="colorHexagonPicker" Color="Red" SelectedStrokeColor="White"
                            ColorBrightnessSteps="{Binding ElementName=colorBrightSteps, Path=Value}"
                            ColorDarknessSteps="{Binding ElementName=colorDarkSteps, Path=Value}"
                            GreyScaleSteps="{Binding ElementName=greySteps, Path=Value}" />
                </Grid>
            </StackPanel>

如代码所示，通过Slider来改变ColorBrightnessSteps, ColorDarknessSteps,和GreyScaleSteps，可以改变选择块的数量和范围。

结论

这个控件的Color系列控件给我提供了很好的Color选择的支持,希望可以帮助到您. 最后,附上项目源代码和截图,希望可以帮到您:

File:Coding4FunColorDemo.zip