WPF Color Palette Control

Download source - 102.23 KB

Introduction

I was searching the Internet for a WPF based color palette control to be used in my application. Since I didn't find one, I created one myself. The objective was to create a user control with WPF from which a user can get a (selected) color from the palette on the following events:

Mouse hover
Mouse click

Now let’s see how the control is implemented.

Creating the Control

The color palette is essentially a WrapPanel which is composed of numerous Rectangle(s). (Note that words denoted in bold are WPF controls). All the Rectangle(s) are colored differently to give an effect of a color palette.

The user control is denoted by the name ColorPalette which comprises numerous ColorPaletteItem user controls. A ColorPaletteItem is a user control itself, which consists of only one Rectangle. The ColorPaletteItem control exposes three properties namely Red, Blue, and Green. Each property is of type Byte. These three basic colors go to make up any color, hence the need for these properties. When a ColorPaletteItem control is loaded, the Rectangle is painted with the values from the three properties Red, Blue and Green. It is shown in the code below:

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

The R, G, B values in the above code vary as 50 step variants. Also the height and width of the ColorPaletteItem control can be set through CellHeight, CellWidth properties. The ColorPalette control raises two events, namely:

ColorPaletteMouseMove – This event is raised when the mouse is hovered over the palette.
ColorPaletteSelect – This event is raised when a color is selected from the palette.

The events raised are shown in the code below:

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

Both the above events pass the Color object to the event handlers. This Color object represents the color on which the mouse hovers or the mouse select happens.

Using the Control

Now let’s create a WPF Windows application which uses the above color palette control. Create a new project WPFColorpaletteHost. Right click on the project and add a reference to the project which contains the color palette control. Now add a new file Window1.xaml. Edit the file to include the namespace in the root element (Window) as follows:

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

Now declare the colorpalette control in the XAML file as follows:

<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>

Define two functions in Window1.xaml.vb to handle the Colorpalette events as follows:

   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

We can also define a canvas which displays the color as the mouse hovers over the palette. The three text boxes each display Red, Green, Blue components of the hovered/selected color.

I've also used the control from a Windows Forms application. (Refer to the attached sample solution).

Conclusion

This colorpalette control can be highly customized to have custom color ranges instead of predefined ranges. We can have a collection property through which we can give a list of colors to be populated in the palette. This gives the flexibility of getting more/less range of colors than already present. I would post that implementation shortly.