GDI+ Accessories

The Color

Introduction

The color is one of the most fundamental objects that enhances the aesthetic appearance of an object. The color is a non-spatial object that is added to an object to modify some of its visual aspects. To support colors, the GDI+ library provides the Color structure that is defined in the System.Drawing namespace.

A color is created as a combination of four 8-bit values. The first value is referred to as alpha but it is mostly used internally. The second is called red. The third is called green. The fourth is called blue:

Converted to decimal, each one of the red, green, and blue numbers would produce:

2⁷ + 2⁶ + 2⁵ + 2⁴ + 2³ + 2² + 2¹ + 2⁰ 

= 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1

= 255

Therefore, each number can have a value that ranges from 0 to 255 in the decimal system. The alpha section is reserved for the operating system. The other three numbers are combined to produce a single value as follows:

Converted to decimal, this number has a value of 255 * 255 * 255 = 16581375. This means that we can have approximately 16 million colors available. The question that comes to mind is how we use these colors, to produce what effect.

You computer monitor has a surface that resembles a series of tinny horizontal and vertical lines. The intersection of a horizontal line and a vertical line is called a pixel. This pixel holds, carries, or displays one color:

As the pixels close to each other have different colors, the effect is a wonderful distortion that creates an aesthetic picture. It is by changing the colors of pixels that you produce the effect of color variances seen on pictures and other graphics.

To make color selection easier, the Color structure is equipped with various properties that each represents a name for a color. Therefore, to use any of these colors, call the Color structure followed by the "." operator, followed by the desired color. All the popular names of colors are recognized and they are represented in the Color structure by static properties. These include Red, Green, Blue, Black, White, Yellow, Fuchsia, Silver, Gray, Brown, and Khaki, etc, just to name a few. There are many other colors that are not necessarily popular. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Private pnl As Panel

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            pnl = New Panel()
            pnl.Location = New Point(10, 10)
            pnl.Size = New Size(200, 150)

            pnl.BackColor = Color.Turquoise

            Controls.Add(pnl)
        End Sub

    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

This would produce:

If none of the pre-defined colors suits you, you can define your own color as a combination of red, green, and blue values. To create a color using this approach, you can declare a variable of type Color. To specify the characters of the color, the Color structure provides the FromArgb() static method overloaded in four versions as follows:

Public Shared Function FromArgb(argb As Integer) As Color
Public Shared Function FromArgb(alpha As Integer, baseColor As Color) As Color
Public Shared Function FromArgb(red As Integer, green As Integer, _
				blue As Integer) As Color
Public Shared Function FromArgb(alpha As Integer, red As Integer, _
			     green As Integer, blue As Integer ) As Color

The third version, which is the most used allows you to specify three values that each ranges from 0 to 255. Here is an example:

Public Sub InitializeComponent()
            pnl = New Panel()
            pnl.Location = New Point(10, 10)
            pnl.Size = New Size(200, 150)

            pnl.BackColor = Color.FromArgb(26, 69, 174)

            Controls.Add(pnl)
End Sub

This would produce:

Instead of defined a color by its RGB composition, if you know the name of the color you want to use, the Color structure proposes a method named FromName that you can use. Its syntax is:

Public Shared Function FromName(name As String) As Color

This method expects as argument the name of the color. Here is an example:

Public Sub InitializeComponent()
            pnl = New Panel()
            pnl.Location = New Point(10, 10)
            pnl.Size = New Size(200, 150)

            pnl.BackColor = Color.FromName("LightBlue")

            Controls.Add(pnl)
End Sub

This would produce:

When calling this method, make sure you know the name of the color you want to use. If you provide an unrecognized name, the compiler does not throw an exception but sets the values of the red, green, and blue so that the object may become transparent. Therefore, you should know the color to use but you cannot realistically know the names of all available colors. To assist you with identifying a color, the Color structure provides a method named FromKnownColor and its syntax is:

Public Shared Function FromKnownColor(color As KnownColor) As Color

This method takes as argument a member of an enumeration named KnownColor. The KnownColor enumeration holds the names of common colors (such as Red, Green, Blue, Yellow, Violet, et), the colors used on web pages (such as LightBlue or DarkGreen), the colors defined in Microsoft Windows (such as ActiveBorder, AppWorkspace, or ButtonFace, etc), and many others. Here is an example of calling this method:

Public Sub InitializeComponent()
            pnl = New Panel()
            pnl.Location = New Point(10, 10)
            pnl.Size = New Size(200, 150)

            pnl.BackColor = Color.FromKnownColor(KnownColor.DarkTurquoise)

            Controls.Add(pnl)
End Sub

Whether a color was initialized with one of the Color pre-defined color properties, using the FromArgb(), the FromName(), or the FromKnownColor() methods, if you want to retrieve the red, green, and blue components of a color, you can use the R, the G, or the B properties to extract the value of each. Each one of these properties is of a byte type. Alternatively, you can call the Color.ToArgb() method. Its syntax is:

Public Function ToArgb As Integer

This method returns an integer.

We mentioned that the colors are commonly know by their names. While the ToArgb() method produces an integer that represents a color, if you instead want to get the color by its common or known name, the Color structure provides a method named ToKnownColor and whose syntax is:

Public Function ToKnownColor As KnownColor

This method returns a value that is based on the KnownColor enumeration. 

To provide the selection of colors on Microsoft Windows applications, the operating system provides a common dialog box appropriate for such tasks. You can use the Color dialog box for various reasons such as letting the user set or change a color of an object or specifying the background color of a control or the color used to paint an object. When it displays, by default, the dialog box appears as follows:

This displays a constant list of colors to the user. If none of the available colors is appropriate for the task at hand, the user can click the Define Custom Colors >> button to expand the dialog box:

The expanded Color dialog box allows the user either to select one of the preset colors or to custom create a color by specifying its red, green, and blue values.

The user can change the color in four different areas. The top left section displays a list of 48 predefined colors. If the desired color is not in that section, the user can click and drag the mouse in the multi-colored palette. The user can also drag the right bar that displays a range based on the color of the palette; the user can scroll up and down by dragging the arrow. For more precision, the user can type the Red, Green and Blue values. Each uses an integral value that ranges from 1 to 255.

To provide the Color dialog box to your application, from the Dialogs section of the Toolbox, you can click the ColorDialog button and click anywhere on the form. The Color dialog box is implemented through the ColorDialog class, which is based on the CommonDialog class that is the ancestor to all Windows common dialog boxes of the .NET Framework. To display the dialog box to the user, call the CommonDialog.ShowDialog() method. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            Dim dlgColor As ColorDialog = New ColorDialog()

            dlgColor.ShowDialog()
        End Sub

    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

This would produce:

The most important and most obvious property of the Color dialog box is the color the user would have selected after using it. This selected color is represented by the ColorDialog.Color property. When you are setting up a ColorDialog control for your application, if you want to specify the default color, in the Properties windows, you can click the arrow of the Color property. This would give you the option to select a color from three available tabs:

At run time, you can set the color programmatically by assigning it a valid known name of a color:

Public Sub InitializeComponent()
            Dim dlgColor As ColorDialog = New ColorDialog()
            dlgColor.Color = Color.Red
            dlgColor.ShowDialog()
End Sub

When the user has finished using the Color dialog box and clicks OK, you can find out what color was selected by retrieving the value of the ColorDialog.Color property. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Private pnlColored As Panel
        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            Dim dlgColor As ColorDialog

            pnlColored = New Panel()
            pnlColored.Location = New Point(10, 10)
            pnlColored.Size = New Size(200, 150)
            Controls.Add(pnlColored)

            dlgColor = New ColorDialog()
            dlgColor.Color = Color.FromKnownColor(KnownColor.DarkTurquoise)

            If dlgColor.ShowDialog = Windows.Forms.DialogResult.OK Then
                pnlColored.BackColor = dlgColor.Color
            End If

        End Sub

    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

By default, the Color dialog box comes up in its regular (small) size. This allows the user to select one of the preset colors. If the desired color is not available, as mentioned already, the user can click the Define Custom Colors >> button. If you want to control the user's ability to expand the dialog box, use the Boolean AllowFullOpen property. When this property is set to True, which is its default value, the dialog box appears in its regular size but with the Define Custom Colors >> button enabled. If you want the user to be able to select only one of the preset colors and not have the ability to expand the dialog box, set the AllowFullOpen property to False. Here is an example:

Public Sub InitializeComponent()
            Dim dlgColor As ColorDialog

            dlgColor = New ColorDialog()

            dlgColor.AllowFullOpen = False

            dlgColor.ShowDialog()

End Sub

With this value, when the Color dialog box comes up, it is in its regular size but the Define Custom Colors >> button is disabled:

As mentioned already, by default, the Color dialog box displays in its regular size. You can control the regular or full size of the dialog using the Boolean FullOpen property. When its value is False, which is the default, the dialog appears regularly. If you want it to appear in its full size, set this property to True.

In our introduction to GDI+, we saw that the screen of a computer monitor uses a series of horizontal and vertical lines, the intersection of two perpendicular lines is a pixel. Each pixel holds one color. Of course, two adjacent pixels can hold the same color or each can hold a different color.

A bitmap is a series of colored adjacent pixels. Put another way, for a group of pixels to be considered a bitmap, these pixels must constitute a group. A bitmap is made by specifying the color of each pixel. This means that the pictures we have used so far were simply made of pixels and each pixel held an appropriate color.

If you decide to create or design a picture using the tool resources in Microsoft Visual C++ available from the Resource View (or the Solution Explorer), you would experiment, on a large scale the ability to specify the color of each individual pixel, using (a limited list of) colors:

Actually, when you have a bitmap, you can access any pixel of the picture and then you can either specify its color or get its current color.

To allow you to specify the color of a pixel, the Bitmap class provides a method named SetPixel and its syntax is:

public void SetPixel(int x, int y,	Color color)

The x and y arguments represent the left and top values of the location of the pixel. The 3rd argument specifies the new color that the pixel will hold. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            BackColor = Color.Black
        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint
            Dim i As Integer
            Dim j As Integer
            Dim bgDrawingArea As Bitmap = New Bitmap(Width, Height)
            e.Graphics.DrawImage(bgDrawingArea, 0, 0)

            For i = 0 To Width
                For j = 0 To Height
                    bgDrawingArea.SetPixel(i, j, Color.White)
                    Dim painter As Graphics = Graphics.FromHwnd(Handle)
                    e.Graphics.DrawImage(bgDrawingArea, 0, 0)
                    j += 20
                Next

                i += 20
            Next
        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

We previously mentioned that a picture was a series of pixels with each pixel holding a color. As opposed to specifying the color of a pixel, you can retrieve its color. To support this, the Bitmap class is equipped with a method named GetPixel. Its syntax is:

public Color GetPixel(int x, int y)

The x and y arguments represent the left and top values of the location of the pixel whose color you want to get. This method returns the color of that pixel. 

1. To create a new program, on the main menu, click File -> New -> Project...
2. In the Templates list, click Windows Application
3. Set the Name to ColorSelector1 and click OK
4. Copy the following picture and paste it somewhere in your computer
    
   
5. Design the form as follows:
    

   Control Text Name Other Properties PictureBox   pbxColor Image: colorpal1.jpg Label Red:     TextBox   txtRed   Label Green:     TextBox   txtGreen   Label Blue:     TextBox   txtBlue   Panel   pnlPreview BorderStyle: FixedSingle Button Close btnClose

6. Right-click the form and click View Code
7. Above the public Form1() line, declare a Boolean variable named IsSelecting:
    

   Public Class Form1 Private isSelecting As Boolean End Class

8. In the Class Name combo box, select (Form1 Events)
9. In the Method Name combo box, select Load and initialize the variable as follows:
    

   Private Sub Form1_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.Load isSelecting = False End Sub

10. In the Class Name combo box, select pbxColor
11. In the Method Name combo box, select MouseDown  and initialize the variable as follows:
     

    Private Sub pbxColor_MouseDown(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) _ Handles pbxColor.MouseDown isSelecting = True End Sub

12. In the Class Name combo box, select pbxColor
13. In the Method Name combo box, select MouseUp and implement the event as follows:
     

    Private Sub pbxColor_MouseUp(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) _ Handles pbxColor.MouseUp isSelecting = False End Sub

14. In the Class Name combo box, select pbxColor
15. In the Method Name combo box, select MouseMove and implement the event as follows:
     

    Private Sub pbxColor_MouseMove(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) _ Handles pbxColor.MouseMove If isSelecting = True Then Dim bmpImage As Bitmap = CType(pbxColor.Image, Bitmap) Dim clr As Color = bmpImage.GetPixel(e.X, e.Y) txtRed.Text = clr.R.ToString() txtGreen.Text = clr.G.ToString() txtBlue.Text = clr.B.ToString() pnlPreview.BackColor = clr End If End Sub

16. Execute the application
17. Click the mouse on the picture mouse and drag to produce a color
     
    
18. Close the form

In some application that deals with graphic, you may use only one picture but in various, if not most other applications, such as those used to display, exchange, or switch pictures, you may deal with different pictures. In such a type of application, sometimes the pictures are of different sizes, even including unpredictable sizes. In another type of application, some of the pictures you use may have the (exact) same size. For this type, instead of using each picture individually, you can store them in a collection, then access each picture when needed.

An image list is a collection of icons or pictures that are stored so that each icon or picture can be located by an index. The icons or pictures must be of the same size and they should be the same type. This means that the collection can be made of only icons of 16x16 sizes, only icons of 32x32 sizes, only icons of 48x48 sizes, or only bitmaps (but of the same size each).

When it comes to design, there are two types of image lists. Each picture can be added individually to the collection, or all of the pictures can be designed in a longer picture and, inside of that long picture, you would use a technique to locate each picture.

Once you get an image list, there is no pre-defined way you must use it. Some Windows controls use an image list to use the pictures they need but there are various other unpredictable ways you can use an image list.

1. To create a new application, on the main menu, click File -> New -> Project...
2. In the Templates list, click Windows Application
3. Set the name to ImageViewer1 and click OK

To support image lists, the .NET Framework provides a class called ImageList that is defined in the System.Windows.Forms namespace of the System.Windows.Forms.dll library. At design time, to create an image list, from the Components section of the Toolbox, you can click the ImageList button  and click the form.

To programmatically create an image list, declare a variable of type ImageList and initialize it using one of its two constructors. The default constructor is used to simply signal that you are going to use an image list. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Private lstImages As ImageList

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

            lstImages = New ImageList()

        End Sub

    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

The ImageList class is equipped with another constructor whose syntax is:

Public Sub New(container As IContainer)

This constructor expects as argument the control container that will be responsible for getting rid of the image list when the application exits.

1. From the Components section of the Toolbox, click ImageList and click the form
2. In the Properties window, change its Name to lstPictures
3. From the Components section of the Toolbox, click Timer and click the form
4. In the Properties window, change its characteristics as follows:
   Enabled: True
   Interval: 2000
5. From the Common Controls section of the Toolbox, click PictureBox and click the form
6. In the Properties window, change its characteristics as follows:
   (Name): pbxViewer
   Dock: Fill
7. Save all

Before creating an image list, you must prepare the image(s). As mentioned previously, you can use individual images that would be made into a set. When creating the images, your primary concern is the size you give them. The default size of a picture is 16x16.

If you are creating a list of icons, you can create each with the default size of 16x16. In some cases (for example if you intend to use the images for a list view), you can create or design a second set of icons whose size are 32x32 (and/or 48x48) each.

You can use a larger size:

• The maximum length a picture can have is 256 pixels
• The maximum height the picture can have is 256 pixels

To create or design your bitmaps, you can use either the bitmap designer of Microsoft Visual Studio or you can use a more advanced external application to prepare the pictures. Although the pictures used in an image list are usually square (16x16, 32x32, 48x48, 96x96, etc), you can use a different length and a different height but, if you are creating individual pictures, they should each have the same size (same length and same height).

Instead of using different pictures, you can create one long picture whose sections would be used to identify each picture. There is no particular way you must design the long picture and there is no real rule about its dimensions: the size would become an issue when it is time to use the picture(s). Alternatively, when creating the picture, if it will include the different pictures that would be considered in the list, make sure you know where each sectional picture starts and where it ends. Here is an example:

In this cases, there is one long picture made of different sections and each section holds a particular picture. When creating this type, you must know the size that holds each particular picture.

After preparing the pictures, you can get ready to create the image list. If you want, you can specify the size of each picture before actually creating the list. To support this, the ImageList class is equipped with a property named ImageSize. The ImageSize property is of type Size. You can use it to specify the size of each picture. Here is an example:

Public Sub InitializeComponent()

            lstImages = New ImageList()
            lstImages.ImageSize = New Size(256, 256)

End Sub

If the image list has been created already, to find out the size of the picture, you can get the value of the ImageSize property.

1. Copy each of the following pictures and paste them in a directory or folder of your computer
    
2. Under the form, click lstPictures and, in the Properties window, set the ImageSize to 250, 165

Before creating the list of images, you must specify the number of bits that will be used to specify the color of each pixel. This information is referred to as the color depth. To support it, the ImageList class is equipped with a property named ColorDepth. The possible values are Depth4Bit, Depth8Bit, Depth16Bit, Depth24Bit, and Depth32Bit. The default value is Depth8Bit.

• Under the form, click lstPictures and, in the Properties window, set the ColorDeph to Depth32Bit

After preparing the pictures, to visually create the list of images, under the form, click the image list control to select it. Then:

• Click the arrow button on the control . Then click Choose Images
   
  
• In the Properties window, click the ellipsis button of the Images field

This would open the Images Collection Editor. To add a picture, you can click the Add button, locate a picture and select it. You can continue doing this until you have selected all necessary pictures. Here is an example:

After selecting the pictures, you can click OK.

To assist you with creating the list of images, the ImageList class is equipped with a property named Images, which is a collection. The ImageList.Images property is of type ImageCollection. The ImageCollection class implements the IList, the ICollection, and the IEnumerable interfaces.

Using the ImageCollection class through the Images property, you can add the necessary icons or pictures one at a time. To help you with this, the ImageCollection class implements the Add() method. If you are creating a list of icons, you can call the following version of the Add() method:

Public Sub Add(value As Icon)

If you are creating a list of pictures, you can call the following version of the Add() method:

Public Sub Add(value As Image)

Here is an example:

Public Sub InitializeComponent()

            lstImages = New ImageList()
            lstImages.ImageSize = New Size(256, 256)

            Dim img1 As Image = Image.FromFile("E:\\Programs\\image1.jpg")
            lstImages.Images.Add(img1)
            Dim img2 As Image = Image.FromFile("E:\\Programs\\Image2.jpg")
            lstImages.Images.Add(img2)

        End Sub

Instead of adding one picture at a time, you can first store them in an array. To add an array of pictures, the ImageCollection class provides a method named AddRange and whose syntax is:

public void AddRange(Image[] images)

1. Under the form, click lstPictures
2. In the Properties window, click Images and click the ellipsis button
3. In the Images Collection Editor, click Add, locate one of the pictures you had saved, select it, and click Open
4. Do the same to select the other pictures
    
   
5. Click OK

After creating an image list, you can use it in your application. As it name implies, an image list is just a collection of images. The control that holds this collection does not define why or when the images would be used. Some Windows controls, such as the list view, the tab control or the toolbar, use them. Most of the time, you will know when a certain control needs an image list and how to use it. Otherwise, you can use the pictures in an image list in various ways. For example, you can use those pictures like any others, such as to display one on a form.

To support the ability to display the pictures of an image list, the ImageList class is equipped with a method named Draw. When calling this method, because the image list doesn't know where it would be used, and because the target control would not define where the picture is coming from, the primary argument to this method is the platform on which to display the picture. This platform is a Graphics object. Once you have decided on the receiving graphics, you must specified the location where the picture would be positioned. You have two primary options. You can specify the location by the left and top coordinates. In this case, you would use the following version of the Draw() method:

Public Sub Draw(g As Graphics, x As Integer, y As Integer, index As Integer)

Alternatively, you can specify the location by a Point value. In this case, you would use the following version of the method:

Public Sub Draw(g As Graphics, pt As Point, index As Integer)

In both cases, the last argument is the index of the desired picture within the collection.

1. Under the form, double-click timer1 and change the file as follows:
    

   Public Class Form1 Private index As Integer Private Sub Timer1_Tick(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles Timer1.Tick If index < 6 Then lstPictures.Draw(pbxViewer.CreateGraphics(), _ pbxViewer.Left, _ pbxViewer.Top, _ index) index += 1 Else index = 0 End If End Sub End Class

2. Execute the application to see the result
    
   
3. Close the form and return to your programming environment

When drawing the pictures of an image list, you can designate one color that the compiler will ignore or "see through". This is referred to as the transparent color. To support this, the ImageList class is equipped with a property named TransparentColor, which is of type Color.