Section 14.8. ComboBox Control

14.8. ComboBox Control

The ComboBox control combines TextBox features with a drop-down lista GUI component that contains a list from which a value can be selected. A ComboBox usually appears as a TextBox with a down arrow to its right. By default, the user can enter text into the TextBox or click the down arrow to display a list of predefined items. If a user chooses an element from this list, that element is displayed in the TextBox. If the list contains more elements than can be displayed in the drop-down list, a scrollbar appears. The maximum number of items that a drop-down list can display at one time is set by property MaxDropDownItems. Figure 14.21 shows a sample ComboBox in three different states.

Figure 14.21. ComboBox demonstration.

As with the ListBox control, you can add objects to collection Items programmatically, using methods Add and AddRange, or visually, with the String Collection Editor. Figure 14.22 lists common properties and a common event of class ComboBox.

Figure 14.22. ComboBox properties and an event.

ComboBox properties and an event	Descripion
Common Properties
DropDownStyle	Determines the ComboBox type. Vaule Simple means that the text portion is editable, and the list portion is always visible. Vaule DropDown (the default) means that the text portion is editable, but the user must click an arrow button to see the list portion. Vaule DropDownList means that the text portion is not editable, and the user must click the arrow button to see the list portion.
Items	The collection of items in the ComboBox control.
MaxDropDownItems	Specifies the maximum number of items (between 1 and 100) that the drop-down list can display. If the number of items exceeds the maximum number of items to display, a scrollbar appears.
SelectedIndex	Returns the index of the selected item, or -1 if there is no selected item.
SelectedItem	Returns a reference to the selected item.
Sorted	Indicates whether items are sorted alphabetically. Setting this property's value to true sorts the items. The default is False.
Common Event
SelectedIndexChanged	Generated when the selected index changes (such as when a different item is selected). This is the default event when control is double clicked in the designer.

Look-and-Feel Observation 14.4

Use a ComboBox to save space on a GUI. It has the disadvantage, however, that unlike with a ListBox, the user cannot see available items without expanding the drop-down list.

Property DropDownStyle determines the type of ComboBox and is represented as a value of the ComboBoxStyle enumeration, which contains values Simple, DropDown and DropDownList. Option Simple does not display a drop-down arrow. Instead, a scrollbar appears next to the control, allowing the user to select a choice from the list. The user also can type in a selection. Style DropDown (the default) displays a drop-down list when the down arrow is clicked (or the down-arrow key is pressed). The user can type a new item in the ComboBox. The last style is DropDownList, which displays a drop-down list but does not allow the user to type in the ComboBox.

The ComboBox control has properties Items (a collection), SelectedItem and SelectedIndex, which are similar to the corresponding properties in ListBox. There can be at most one selected item in a ComboBox. If no items are selected, then SelectedIndex is -1. When the selected item changes, a SelectedIndexChanged event occurs.

Class FrmComboBoxTest (Fig. 14.23) allows users to select a shape to drawcircle, ellipse, square or pie (in both filled and unfilled versions)by using a ComboBox. The ComboBox in this example is uneditable, so the user cannot type in the ComboBox.

Figure 14.23. ComboBox used to draw a selected shape.

  1  ' Fig. 14.23: FrmComboBoxTest.vb  2  ' Using ComboBox to select a shape to draw.  3  Public Class FrmComboBoxTest  4     ' get index of selected shape, then draw the shape  5     Private Sub cboImage_SelectedIndexChanged( _  6        ByVal sender As System.Object, ByVal e As System.EventArgs) _  7        Handles cboImage.SelectedIndexChanged  8        ' create graphics object, Pen and SolidBrush  9        Dim myGraphics As Graphics = MyBase.CreateGraphics() 10 11        ' create Pen using color DarkRed 12        Dim myPen As Pen = New Pen(Color.DarkRed) 13 14        ' create SolidBrush using color DarkRed 15        Dim mySolidBrush As SolidBrush = New SolidBrush(Color.DarkRed) 16 17        ' clear drawing area setting it to color white 18        myGraphics.Clear(Color.White) 19 20        ' find index, draw proper shape 21        Select Case cboImage.SelectedIndex 22           Case 0 ' case Circle is selected 23              myGraphics.DrawEllipse(myPen, 50, 50, 150, 150) 24           Case 1 ' case Rectangle is selected 25              myGraphics.DrawRectangle(myPen, 50, 50, 150, 150) 26           Case 2 ' case Ellipse is selected 27              myGraphics.DrawEllipse(myPen, 50, 85, 150, 115) 28           Case 3 ' case Pie is selected 29              myGraphics.DrawPie(myPen, 50, 50, 150, 150, 0, 45) 30           Case 4 ' case Filled Circle is selected 31              myGraphics.FillEllipse(mySolidBrush, 50, 50, 150, 150 ) 32           Case 5 ' case Filled Rectangle is selected 33              myGraphics.FillRectangle(mySolidBrush, 50, 50, 150, 150 ) 34           Case 6 ' case Filled Ellipse is selected 35              myGraphics.FillEllipse(mySolidBrush, 50, 85, 150, 115) 36           Case 7 ' case Filled Pie is selected 37              myGraphics.FillPie(mySolidBrush, 50, 50, 150, 150, 0, 45) 38        End Select 39 40        myGraphics.Dispose() ' release the Graphics object 41     End Sub ' cboImage_SelectedIndexChanged 42  End Class ' FrmComboBoxTest 

(a)

(b)

(c)

(d)

Look-and-Feel Observation 14.5

Make lists (such as ComboBoxes) editable only if the program is designed to accept user-submitted elements. Otherwise, the user might try to enter a custom item that is improper for the purposes of your application.

After creating ComboBox cboImage, make it uneditable by setting its DropDownStyle to DropDownList in the Properties window. Next, add items Circle, Square, Ellipse, Pie, Filled Circle, Filled Square, Filled Ellipse and Filled Pie to the Items collection using the String Collection Editor. Whenever the user selects an item from cboImage, a SelectedIndexChanged event occurs and event handler cboImage_SelectedIndexChanged (lines 541) executes. Lines 915 create a Graphics object, a Pen and a SolidBrush, which are used to draw on the Form. The Graphics object (line 9) allows a pen or brush to draw on a component using one of several Graphics methods. The Pen object (line 12) is used by methods DrawEllipse, DrawRectangle and DrawPie (lines 23, 25, 27 and 29) to draw the outlines of their corresponding shapes. The SolidBrush object (line 15) is used by methods FillEllipse, FillRectangle and FillPie (lines 31, 33, 35 and 37) to fill their corresponding solid shapes. Line 18 colors the entire Form White, using Graphics method Clear. These methods are discussed in greater detail in Chapter 17.

The application draws a shape based on the selected item's index. The Select Case statement (lines 2138) uses cboImage.SelectedIndex to determine which item the user selected. Graphics method DrawEllipse (line 23) takes a Pen, the x- and y-coordinates of the center and the width and height of the ellipse to draw. The origin of the coordinate system is in the upper-left corner of the Form; the x-coordinate increases to the right, and the y-coordinate increases toward the bottom of the Form. A circle is a special case of an ellipse with equal width and height. Line 23 draws a circle. Line 27 draws an ellipse that has different values for width and height.

Class Graphics method DrawRectangle (line 25) takes a Pen, the x- and y-coordinates of the upper-left corner and the width and height of the rectangle to draw. Method DrawPie (line 29) draws a pie as a portion of an ellipse. The ellipse is bounded by a rectangle. Method DrawPie takes a Pen, the x- and y-coordinates of the upper-left corner of the rectangle, its width and height, the start angle (in degrees) and the sweep angle (in degrees) of the pie. Angles increase clockwise. The FillEllipse (lines 31 and 35), FillRectangle (line 33) and FillPie (line 37) methods are similar to their unfilled counterparts, except that they take a SolidBrush instead of a Pen. Some of the drawn shapes are illustrated in the screen shots of Fig. 14.23.