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.

(This item is displayed on page 675 in the print version)

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.

(This item is displayed on page 675 in the print version)

ComboBox properties and an event	Description
Common Properties
DropDownStyle	Determines the type of ComboBox. Value Simple means that the text portion is editable, and the list portion is always visible. Value DropDown (the default) means that the text portion is editable, but the user must click an arrow button to see the list portion. Value 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. If there is no selected item, -1 is returned.
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. A disadvantage is 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 TextBox.

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 ComboBoxTestForm (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 TextBox.

Figure 14.23. ComboBox used to draw a selected shape.

 1 // Fig. 14.23: ComboBoxTestForm.cs
 2 // Using ComboBox to select a shape to draw.
 3 using System;
 4 using System.Drawing;
 5 using System.Windows.Forms;
 6
 7 // Form uses a ComboBox to select different shapes to draw
 8 public partial class ComboBoxTestForm : Form
 9 {
10 // default constructor
11 public ComboBoxTestForm()
12 {
13 InitializeComponent();
14 } // end constructor
15
16 // get index of selected shape, draw shape
17 private void imageComboBox_SelectedIndexChanged(
18 object sender, EventArgs e )
19 {
20 // create graphics object, Pen and SolidBrush
21 Graphics myGraphics = base.CreateGraphics();
22
23 // create Pen using color DarkRed
24 Pen myPen = new Pen( Color.DarkRed );
25
26 // create SolidBrush using color DarkRed
27 SolidBrush mySolidBrush = new SolidBrush( Color.DarkRed );
28
29 // clear drawing area setting it to color white
30 myGraphics.Clear( Color.White );
31
32 // find index, draw proper shape
33 switch ( imageComboBox.SelectedIndex )
34 {

35 case 0: // case Circle is selected 36 myGraphics.DrawEllipse( myPen, 50, 50, 150, 150 ); 37 break; 38 case 1: // case Rectangle is selected 39 myGraphics.DrawRectangle( myPen, 50, 50, 150, 150 ); 40 break; 41 case 2: // case Ellipse is selected 42 myGraphics.DrawEllipse( myPen, 50, 85, 150, 115 ); 43 break; 44 case 3: // case Pie is selected 45 myGraphics.DrawPie( myPen, 50, 50, 150, 150, 0, 45 ); 46 break; 47 case 4: // case Filled Circle is selected 48 myGraphics.FillEllipse( mySolidBrush, 50, 50, 150, 150 ); 49 break; 50 case 5: // case Filled Rectangle is selected 51 myGraphics.FillRectangle( mySolidBrush, 50, 50, 150, 150 ); 52 break; 53 case 6: // case Filled Ellipse is selected 54 myGraphics.FillEllipse( mySolidBrush, 50, 85, 150, 115 ); 55 break; 56 case 7: // case Filled Pie is selected 57 myGraphics.FillPie( mySolidBrush, 50, 50, 150, 150, 0, 45 ); 58 break; 59 } // end switch 60 61 myGraphics.Dispose(); // release the Graphics object 62 } // end method imageComboBox_SelectedIndexChanged 63 } // end class ComboBoxTestForm

(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 imageComboBox, 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 imageComboBox, a SelectedIndexChanged event occurs and event handler imageComboBox_SelectedIndexChanged (lines 1760) executes. Lines 2127 create a Graphics object, a Pen and a SolidBrush, which are used to draw on the Form. The Graphics object (line 21) allows a pen or brush to draw on a component using one of several Graphics methods. The Pen object (line 24) is used by methods DrawEllipse, DrawRectangle and DrawPie (lines 36, 39, 42 and 45) to draw the outlines of their corresponding shapes. The SolidBrush object (line 27) is used by methods FillEllipse, FillRectangle and FillPie (lines 48, 51, 54 and 57) to fill their corresponding solid shapes. Line 30 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 switch statement (lines 3359) uses imageComboBox.SelectedIndex to determine which item the user selected. Graphics method DrawEllipse (line 36) 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 downward. A circle is a special case of an ellipse (with the width and height equal). Line 36 draws a circle. Line 42 draws an ellipse that has different values for width and height.

Class Graphics method DrawRectangle (line 39) 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 45) 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 48 and 54), FillRectangle (line 51) and FillPie (line 57) 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.