Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF
Article

WPF Color Palette Control

Rate me:
Please Sign up or sign in to vote.
4.90/5 (25 votes)
19 Feb 2008CPOL2 min read 74.8K   718   20   4
A color palette user control developed using WPF

Image 1

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:

VB.NET
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:

VB.NET
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:

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

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

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

VB.NET
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).

Image 2

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.

History

  • 19th February, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Proteans Software Solutions, Bangalore
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralNeed to fix article format [modified] Pin
User 27100919-Feb-08 5:50
User 27100919-Feb-08 5:50 
GeneralRe: Need to fix article format Pin
Christopher Vinod19-Feb-08 19:35
Christopher Vinod19-Feb-08 19:35 
GeneralRe: Need to fix article format Pin
User 27100921-Feb-08 7:49
User 27100921-Feb-08 7:49 
QuestionScreenshot? Pin
Manuel Then19-Feb-08 5:13
Manuel Then19-Feb-08 5:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.