WPF 调色板控件






4.90/5 (23投票s)
使用 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 日:初始发布