Silverlight ColorPicker

• 下载源代码 - 24.92 KB

引言

去年，我参与了一个 ASP.NET Ajax 项目。我们需要构建一个非常复杂的 Silverlight 控件。我的工作是构建这个 Silverlight 控件。Silverlight 非常棒。但是很多常见的控件，例如 ToolBar、ContextMenu 等都没有。你需要购买或自己创建。在本文中，我想谈谈一个带有下拉颜色选择功能的颜色选择器控件，更像是 Visual Studio 2010 属性浏览器中用于编辑颜色类型的那种。

我们需要一个感觉像那样的颜色选择器

有一天，我们在 Silverlight 项目中需要一个 ColorPicker 控件。我找到很多，开源的和需要购买的都有。没有一个完美，也没有我们想要的感觉。我们想要一个像 ComboBox 或 DatePicker 一样的颜色选择器。我们想要一个用户可以找到预定义颜色或自定义颜色的颜色选择器。最终这个需求被放弃了。

我喜欢 VS 2010 属性浏览器中使用的颜色选择器的感觉。所以我创建了一个类似它的颜色选择器。

使用颜色选择器

我的颜色选择器非常易于使用。

• Color：唯一的特殊属性，用于获取或设置当前选定的颜色

• ColorChanged：唯一的特殊事件，在 Color 属性更改时发生

在 *.xaml 文件中

<UserControl x:Class="SilverlightControls.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:mine="clr-namespace:SilverlightControls"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="600">

    <Grid x:Name="LayoutRoot" Background="White">
        <mine:ColorPicker Height="23" HorizontalAlignment="Left" 
	VerticalAlignment="Top" Margin="50,50" x:Name="colorPicker1" 
	Width="150" Color="Red" ColorChanged="colorPicker1_ColorChanged">
        </mine:ColorPicker>
    </Grid>
</UserControl>

在 *.cs 文件中

namespace SilverlightControls
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void colorPicker1_ColorChanged
	(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (colorPicker1 != null)
            {
                MessageBox.Show(colorPicker1.Color.ToString());
            }
        }
    }
}

关于颜色选择器的下拉部分：ColorBoard

我将 ColorPicker 的下拉部分命名为 ColorBoard。ColorBoard 有三个部分。

• 第一部分：左上部分是 HSV 部分
• 第二部分：右上部分是 ARGB 部分
  关于 HSV 颜色模型以及与 ARGB 颜色模型之间的转换，您可以参考维基百科的文章。（http://en.wikipedia.org/wiki/HSL_and_HSV）
• 第三部分：底部部分是预定义的颜色部分。这是一个 ComboBox。当前顺序是 Windows 默认顺序。
  如果您想使用字母顺序，请注释掉 PredefinedColor.cs 文件中的第 26 行，并取消注释同一文件中的第 29 行。

  In file PredefinedColor.cs.
  // "Aqua" and "Cyan" are same color 
  // (0xFF00FFFF). "Fuchsia" and "Magenta" are same color (0xFFFF00FF).
  
  line 23:    private static void Initialize()
  line 24:    {
  line 25:        // "Aqua" and "Fuchsia" will not be in Dictionary
  line 26:        Initialize_Windows();
  line 27:
  line 28:        // "Cyan" and "Magenta" will not be in Dictionary
  line 29:        //Initialize_Alphabet();
  line 30:    }

如何绘制 S-V 矩形？

这个问题是最难解决的。它困扰了我很长时间。设置每个点的颜色？不，那太愚蠢了。

最终，我找到了解决方案：使用两个 LinearGradientBrush。一个水平方向用于饱和度 (S)。另一个垂直方向用于明度 (V)。

<Rectangle x:Name="RectangleRootHSV" Width="80"
Height="80" Stroke="{StaticResource BorderBrush}" StrokeThickness="1">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="#FFFFFFFF" Offset="0" />
            <GradientStop x:Name="GradientStopHSVColor"
            Color="#FFFF0000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<Rectangle x:Name="RectangleHSV" Width="80" Height="80">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="#00000000" Offset="0" />
            <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

历史

• 版本 1.0 (2010-12-30) - 初始发布