Owner Drawn ComboBox Example

C# Owner Drawn ComboBox Example

1. Introduction To C# Owner Drawn Control

When the container draws the control, we call it as an Owner Drawn Control. First, let us study the default behavior. When we place a control on the form, the control’s appearance is decided by the control itself. Let us say, for example, that we placed a Combo Box control on the form. The dot-net framework takes care of the ComboBox appearance. Means, the ComboBox class or its parent class can take the responsibility of drawing the control. This involves drawing a white rectangle for a text box followed by a small square with a down arrow in it. When the user clicks the down arrow, the control draws one more rectangle below combo box to show the list of items.

The control drawing itself is a normal behavior. Now, let us say that the Form draws each ComboBox item with a double lined red border around each item. Here, the Form is called a Parent or Owner of the ComboBox and the control is known as ‘Owner Drawn Control’. In easy words, the Form (Owner of the ComboBox) draws the ComboBox Items. In this article, we will see how to create an Owner Drawn ComboBox with color titles along with text.

2. About The Example

Below is the Screenshot of the application that we will create:

Owner Drawn ComboBox Example
Owner Drawn ComboBox Example

In the above screenshot, we change the default appearance of the ComboBox to display the color boxes. This ComboBox is partly drawn by the Form. That is, the class for the ComboBox control draws the ComboBox with a Down Arrow. In our example, the Form draws the content of the ComboBox when it is dropped down.

The Owner of the ComboBox in this example will perform the Following drawing:

  1. Color Rectangle.
  2. Text String next to the color rectangle.
  3. Red Border around the selected Item.

Once the color is selected from this Owner Drawn ComboBox, the text typed in the text box will appear in the selected color.

3. The DrawMode Property

Some controls like ListBox, ComboBox, Tab and TreeView Control supports Owner Draw. All these controls have the property called ‘DrawMode’, which specifies what kind of owner drawn will be used. The ComboBox and ListBox supports three kinds of DrawMode, and these modes are:

  1. Normal
  2. OwnerDrawFixed
  3. OwnerDrawVariable

3.1 Normal Mode

Normal Mode is the default drawing mode set to a ListBox and ComboBox control. In this Mode, the control class takes the responsibility of drawing itself and drawing each item in it.

3.2 OwnerDrawFixed Mode

When we set OwnerDrawFixed Mode to the DrawMode property, the owner will draw the control by handling the ‘DrawItem Event’. Each item will have fixed height.

3.3 OwnerDrawVarible Mode

In OwnerDrawVarible Mode, the owner will draw and measure each item. So, we can say that each item can have various heights. When this Mode is set, the owner of the control should add handlers for the ‘DrawItem’ and ‘MeasureItem’ events. In the MeasureItem Handler, we measure each item and in the DrawItem, we draw each item. The Dot-Net framework calls the MeasureItem Handler only during the control initialization. But Dot.Net will call the DrawItem Handler for each item whenever the user clicks the drop arrow button.

For our Owner Drawn ComboBox example, we need to set the OwnerDrawFixed to the DrawMode property as shown below:

The DrawMode Property of ComboBox
The DrawMode Property of ComboBox

4. Preparing The Example

4.1 Text Strings Of Owner Drawn ComboBox

In the Form Load handler function, we populate the combo box with the strings that represent the color. We will draw our color tiles before this string of texts. Below is the code:

4.2 Function to Return Color Instance

Next, write a function that returns the ‘ System.Drawing.Colour’. The function takes a standard color name in string format and returns the Color instance. Below is the function:

4.3 Retrieve Color Of User Choice

In the ComboBox Selection change, we get the selected colour to set the ‘ForeColor Property’ of the text box. To retrieve the colour, we use the previously written GetColor() function. Below is the code for that:

5. Owner Drawn ComboBox With Color Tiles & Text

5.1 DrawItem Handler Of ComboBox

As already pointed out, in our ComboBox the DrawItem Handler will do the drawing for each item present in the Combo. The dot-net framework will call this DrawItem Handler when user click the down arrow. If there are ‘n’ elements, dot-net calls this handler function ‘n’ times. This happens when DrawMode is not Normal. In this DrawItem Handler, first, we get the Color Object and colour name by making use of the index revealed by the ‘ DrawItemEventArgs’.

5.2 Erase Background Using DrawItemEventArgs

As the DrawItem function takes the duty of drawing the content of each combo box item, it first performs the background drawing. So, we get Graphics object grp from the DrawItemEventArgs then call DrawBackGround()  function from the same DrawItemEventArgs. This will clear all the previous drawing in the drop-down list. Below is the code:

5.3 DrawItemEventArgs & Item Bounds

The DrawItemEventArgs supplies bounding box of the current combo box item through its member Bounds. First, we apply a one-pixel indent on Top, Left and Bottom using the Bounds of DrawItemEventArgs. And we fix the width as 20 pixels. Based on this Bounds, a Rectangle rct is formed. Through the already retrieved Graphics object, we draw the rectangle tile for the current combo box item. Note, the Framework calls this DrawItem Handler for every item and we get the Bounds of each item via the DrawItemEventArgs. Below is the code:

When we run our Owner Drawn ComboBox at this stage, it looks like as shown below:

Owner Drawn ComboBox - Stage1 - Tiles
Owner Drawn ComboBox – Stage1 – Tiles

5.4 Painting Rectangle Tiles

After forming the rectangle tile, we fill it with the needed color that matches with the item string. To perform the paint operation on the rectangle, we create a GDI+ Brush object. Note, The brush color matches to the text string of the ComboBox item. Below is code for filling the rectangle using GDI+ brush:

Now the Owner Drawn ComboBox looks like below now:

Owner Drawn ComboBox - Stage2 - Tiles With Colors
Owner Drawn ComboBox – Stage 2 – Tiles With Colors

5.5 Calculate Left Offset & Draw String

Now we have colour rectangles in the combo box. Next, we should add the text that belongs to the colour rectangle. To draw the text, we should have offset from the left of the combo box as the rectangle is already occupying the left portion. To apply offset for drawing the text, we should perform the summation of, left offset already done to draw the rectangle (Shown as 1), the rectangle width and the new offset from the right of the colour rectangle which we will hard code it as 2 pixels. The summation will give the starting location of the text from the left side of drop-down list. Below picture explains this:

Calculate Text Location After Titles
Calculate Text Location After Titles

In the code, we make a call to DrawString() method on the retrieved grp object. While calling the function, the left location of the string to be drawn is calculated based on the color rectangle’s dimensions, which we already explored. Below is the code that draws the text next to the color Rectangle:

Running the Owner Drawn ComboBox at this stage look like below.

Owner Drawn ComboBox - Stage3 - Colored Tiles with Text
Owner Drawn ComboBox – Stage 3 – Colored Tiles with Text

5.6 Drawing Bounding Rectangle For Highlighting

At last, we draw a bounding rectangle for the selected combo box item. By performing Bit-wise AND (&) with ‘ e.state’. The state can tell that the current item we are drawing is in selected stated or Not. When an item is in Highlighted state, we draw a bounding rectangle around it in the Red Rectangle colour. To erase previously drawn red bounding rectangle, we perform the drawing in the else portion. One can see this bounding rectangle when they move the selection using mouse & up/down arrow keys. Below is the code:

The below given video shows the completed Owner Drawn ComboBox Example:


Video: Running the Owner Drawn Example


Source Code: Download C# Owner Drawn ComboBox Example From Google Drive

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.