65.9K
CodeProject 正在变化。 阅读更多。
Home

WPF 调色板控件

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (23投票s)

2008年2月19日

CPOL

2分钟阅读

viewsIcon

76186

downloadIcon

737

使用 WPF 开发的颜色调色板用户控件

引言

我一直在互联网上搜索基于 WPF 的颜色调色板控件,以便在我的应用程序中使用。由于没有找到,我自己创建了一个。目标是创建一个带有 WPF 的用户控件,用户可以在以下事件中从调色板中获取(选择的)颜色

  • 鼠标悬停
  • 鼠标点击

现在让我们看看控件是如何实现的。

创建控件

颜色调色板本质上是一个 WrapPanel,它由许多 Rectangle(矩形)组成。(请注意,以 粗体 表示的词是 WPF 控件)。所有 Rectangle(矩形)都被涂上不同的颜色,以产生颜色调色板的效果。

用户控件由名称 ColorPalette 表示,它包含许多 ColorPaletteItem 用户控件。 ColorPaletteItem 本身就是一个用户控件,仅由一个 Rectangle(矩形)组成。 ColorPaletteItem 控件公开了三个属性,即 Red(红色)、Blue(蓝色)和 Green(绿色)。每个属性的类型都是 Byte(字节)。这三种基本颜色构成了任何颜色,因此需要这些属性。当加载 ColorPaletteItem 控件时,Rectangle(矩形)将使用三个属性 Red(红色)、Blue(蓝色)和 Green(绿色)中的值进行绘制。如下面的代码所示

Private Sub ColorPalette_Loaded(ByVal sender As System.Object, _
    ByVal e As System.Windows.RoutedEventArgs)
Handles MyBase.Loaded
    Dim cpi As ColorPaletteItem
    WrapPanel1.Width = m_width
    Border1.Width = m_width
    WrapPanel1.Height = m_height
    Border1.Height = IIf((
      216 Mod (Convert.ToInt32(m_width) / Convert.ToInt32(m_cellWidth))) = 0,
      (216 * m_cellHeight / (Convert.ToInt32(m_width) / Convert.ToInt32(m_cellWidth))),
      (216 * m_cellHeight / (Convert.ToInt32(m_width) / Convert.ToInt32(m_cellWidth))) +
         m_height)
    For i As Integer = 1 To 255 Step 50
        For j As Integer = 1 To 255 Step 50
            For k As Integer = 1 To 255 Step 50
                cpi = New ColorPaletteItem
                cpi.CellHeight = m_cellHeight
                cpi.CellWidth = m_cellWidth
                cpi.Red = Convert.ToByte(i)
                cpi.Green = Convert.ToByte(j)
                cpi.Blue = Convert.ToByte(k)
                WrapPanel1.Children.Add(cpi)
            Next
        Next
    Next
End Sub

上面代码中的 R、G、B 值以 50 步的变化形式变化。此外,ColorPaletteItem 控件的高度和宽度可以通过 CellHeight(单元格高度)、CellWidth(单元格宽度)属性进行设置。 ColorPalette 控件引发两个事件,即

  • ColorPaletteMouseMove – 当鼠标悬停在调色板上时,会引发此事件。
  • ColorPaletteSelect – 当从调色板中选择颜色时,会引发此事件。

引发的事件如下面的代码所示

Private Sub WrapPanel1_MouseLeftButtonDown(ByVal sender As System.Object, _
    ByVal e As MouseButtonEventArgs)
        Dim cpi As ColorPaletteItem
        cpi = CType(e.Source, ColorPaletteItem)
        Dim scb As SolidColorBrush
        scb = CType(cpi.Rect.Fill, SolidColorBrush)
        m_SelectedColor = scb.Color
        RaiseEvent ColorPaletteSelect(Me, m_SelectedColor)
    End Sub
    Private Sub WrapPanel1_MouseMove(ByVal sender As System.Object, _
        ByVal e As System.Windows.Input.MouseEventArgs)
        Dim cpi As ColorPaletteItem
        cpi = CType(e.Source, ColorPaletteItem)
        Dim scb As SolidColorBrush
        scb = CType(cpi.Rect.Fill, SolidColorBrush)
        m_CurrentColor = scb.Color
        RaiseEvent ColorPaletteMouseMove(Me, m_CurrentColor)
    End Sub

以上两个事件都将 Color(颜色)对象传递给事件处理程序。此 Color(颜色)对象表示鼠标悬停或鼠标选择时发生的颜色。

使用控件

现在让我们创建一个使用上述颜色调色板控件的 WPF Windows 应用程序。创建一个新项目 WPFColorpaletteHost。右键单击该项目,然后添加对包含颜色调色板控件的项目的引用。现在添加一个新文件 *Window1.xaml*。编辑该文件,以在根元素 (Window) 中包含 namespace(命名空间),如下所示

xmlns:my="clr-namespace:Colorpalettecontrol;assembly=ColorPaletteControl" 

现在在 XAML 文件中声明 colorpalette 控件,如下所示

<my:ColorPalette Name="ColorPalette1" PaletteHeight="300" PaletteWidth="720"
CellHeight="20" CellWidth="20" ColorPaletteMouseMove="ColorPalette_ColorPaletteMouseMove"
    ColorPaletteSelect="ColorPalette_ColorPaletteSelect"
    Margin="11,0,0,0" HorizontalAlignment="Left"
Width="767" Height="310" VerticalAlignment="Top"> </my:ColorPalette> 

在 *Window1.xaml.vb* 中定义两个函数,以处理 Colorpalette 事件,如下所示

   Private Sub ColorPalette_ColorPaletteMouseMove(ByVal sender As System.Object,
        ByVal c As
            System.Windows.Media.Color)
        Dim scb As SolidColorBrush
        If (c = Nothing) Then
            Canvas1.Background = Brushes.DarkGray
            scb = CType(Canvas1.Background, SolidColorBrush)
            SetValues(scb.Color.R.ToString(), scb.Color.G.ToString(),
                scb.Color.B.ToString())
        Else
            scb = New SolidColorBrush
            'scb = CType(Canvas1.Background, SolidColorBrush)
            scb.Color = c
            Canvas1.Background = scb
            SetValues(c.R, c.G, c.B)
        End If
    End Sub
    Private Sub ColorPalette_ColorPaletteSelect(ByVal sender As System.Object,
        ByVal c As
                System.Windows.Media.Color)
        Dim scb As SolidColorBrush
        scb = New SolidColorBrush
        'scb = CType(Canvas1.Background, SolidColorBrush)
        scb.Color = c
        Canvas1.Background = scb
        SetValues(c.R, c.G, c.B)
    End Sub 

我们还可以定义一个画布,该画布在鼠标悬停在调色板上时显示颜色。三个文本框分别显示悬停/选定颜色的 Red(红色)、Green(绿色)、Blue(蓝色)分量。

我还从 Windows Forms 应用程序中使用了该控件。(请参阅附加的示例解决方案)。

结论

这个 colorpalette 控件可以高度自定义,以具有自定义颜色范围,而不是预定义的范围。我们可以拥有一个集合属性,通过该属性,我们可以给出要在调色板中填充的颜色列表。这提供了比现有颜色更多/更少范围的灵活性。我将在稍后发布该实现。

历史

  • 2008 年 2 月 19 日:初始发布
© . All rights reserved.