Home

The Styles of a Combo Box

 
 

The Flat Styles

Like most graphical controls, a combo box appears as a 3-D object with raised borders. As an alternative, you can display it as a flat object. To assist you with this choice, the ComboBox class provides the FlatStyle property. The FlatStyle property is based on the FlatStyle enumeration. Its members are:

  • Standard: This is the default value of the property. It makes the control appear with raised borders:
     
    private void InitializeComponent()
    {
            SuspendLayout();
            lblTitle = new Label();
            lblTitle.Text = "Academic Disciplines";
            lblTitle.Location = new Point(12, 12);
            lblTitle.AutoSize = true;
            Controls.Add(lblTitle);
    
            cbxAcademicDisciplines = new ComboBox();
            cbxAcademicDisciplines.Location = new Point(12, 32);
            cbxAcademicDisciplines.Width = 232;
     
            cbxAcademicDisciplines.Items.Add("Natural Sciences");
            cbxAcademicDisciplines.Items.Add("Mathematics and Computer Sciences");
            cbxAcademicDisciplines.Items.Add("Social Sciences");
            cbxAcademicDisciplines.Items.Add("Humanities");
            cbxAcademicDisciplines.Items.Add("Professions and Applied Sciences");
    
            cbxAcademicDisciplines.FlatStyle = FlatStyle.Standard;
    
            Controls.Add(cbxAcademicDisciplines);
    }
  • Popup: The control will appear flat with a surrounding gray line:
     
    cbxAcademicDisciplines.FlatStyle = FlatStyle.Popup;
    Popup Combo Box
  • Flat: The control appears flat with a white surroundiong border:
     
    cbxAcademicDisciplines.FlatStyle = FlatStyle.Flat;
  • System: The user's operating system (and theme, if any) will determine how the control must appear

The Drop Down Style

In our introduction to the combo box, we saw that it appeared like a text box with a down-pointing button on its right side. In reality, that was the description of just one type of combo box. There are three styles of combo boxes, although all allow the user to make only one selection. These styles are controlled by the DropDownStyle property, which is based on the ComboBoxStyle enumeration.

One of the types of combo boxes is referred to as Drop Down and is created by setting the DropDownStyle property to DropDown. Here is an example:

private void InitializeComponent()
{
        lblTitle = new Label();
        lblTitle.Text = "Academic Disciplines";
        lblTitle.Location = new Point(12, 12);
        lblTitle.AutoSize = true;
        Controls.Add(lblTitle);

        cbxAcademicDisciplines = new ComboBox();
        cbxAcademicDisciplines.Location = new Point(12, 32);
        cbxAcademicDisciplines.Items.Add("Natural sciences");
        cbxAcademicDisciplines.Items.Add("Mathematics and Computer sciences");
        cbxAcademicDisciplines.Items.Add("Social sciences");
        cbxAcademicDisciplines.Items.Add("Humanities");
        cbxAcademicDisciplines.Items.Add("Professions and Applied sciences");

        cbxAcademicDisciplines.DropDownStyle = ComboBoxStyle.DropDown;

        Controls.Add(cbxAcademicDisciplines);
}

This type is made of a text box on the left side and a down-pointing arrowed button on the right side. Depending on how the control was created, when it comes up, it may not display anything:

A Drop Down Combo Box

Normally, if you want a DropDown style of combo box to display a string when the control comes up, you can either enter a value in the Text property or assign a string to the ComboBox.Text property. Here is an example:

private void InitializeComponent()
{
        lblTitle = new Label();
        lblTitle.Text = "Academic Disciplines";
        lblTitle.Location = new Point(12, 12);
        lblTitle.AutoSize = true;
        Controls.Add(lblTitle);

        cbxAcademicDisciplines = new ComboBox();
        cbxAcademicDisciplines.Location = new Point(12, 32);
        cbxAcademicDisciplines.Items.Add("Natural sciences");
        cbxAcademicDisciplines.Items.Add("Mathematics and Computer sciences");
        cbxAcademicDisciplines.Items.Add("Social sciences");
        cbxAcademicDisciplines.Items.Add("Humanities");
        cbxAcademicDisciplines.Items.Add("Professions and Applied sciences");

        cbxAcademicDisciplines.DropDownStyle = ComboBoxStyle.DropDown;
        cbxAcademicDisciplines.Text = "Social sciences";

        Controls.Add(cbxAcademicDisciplines);
}

This would produce:

The Text of a Combo Box

The string you give to the Text property does not have to be one of the items of the list. 

To use the combo box, the user can click its down pointing arrow. At any time, to find out whether the list is displaying, you can check the value of the DroppedDown Boolean property. In the same way, to drop the list, you can programmatically set the combo box' DroppedDown property to true.

Once the list is displaying, if the user clicks that arrow, a list would appear (or expand). If the string assigned to the Text property is one of the items in the list, it would display in the text box side of the control and it would be selected in the list. Here is an example:

private void InitializeComponent()
{
        lblTitle = new Label();
        lblTitle.Text = "Academic Disciplines";
        lblTitle.Location = new Point(12, 12);
        lblTitle.AutoSize = true;
        Controls.Add(lblTitle);

        cbxAcademicDisciplines = new ComboBox();
        cbxAcademicDisciplines.Location = new Point(12, 32);
        cbxAcademicDisciplines.Items.Add("Natural Sciences");
        cbxAcademicDisciplines.Items.Add("Mathematics and Computer Sciences");
        cbxAcademicDisciplines.Items.Add("Social Sciences");
        cbxAcademicDisciplines.Items.Add("Humanities");
        cbxAcademicDisciplines.Items.Add("Professions and Applied Sciences");

        cbxAcademicDisciplines.DropDownStyle = ComboBoxStyle.DropDown;
        cbxAcademicDisciplines.Text = "Social Sciences";

        Controls.Add(cbxAcademicDisciplines);
}

This would produce:

Using a DropDown combo box

If the string assigned to the Text property is not one of the items in the list, it would still appear selected in the text box side of the control:

Here is an example:

private void InitializeComponent()
{
        lblTitle = new Label();
        lblTitle.Text = "Academic Disciplines";
        lblTitle.Location = new Point(12, 12);
        lblTitle.AutoSize = true;
        Controls.Add(lblTitle);

        cbxAcademicDisciplines = new ComboBox();
        cbxAcademicDisciplines.Location = new Point(12, 32);
        cbxAcademicDisciplines.Items.Add("Natural Sciences");
        cbxAcademicDisciplines.Items.Add("Mathematics and Computer Sciences");
        cbxAcademicDisciplines.Items.Add("Social Sciences");
        cbxAcademicDisciplines.Items.Add("Humanities");
        cbxAcademicDisciplines.Items.Add("Professions and Applied Sciences");

        cbxAcademicDisciplines.DropDownStyle = ComboBoxStyle.DropDown;

        cbxAcademicDisciplines.Text = "Arts & Sciences";

        Controls.Add(cbxAcademicDisciplines);
}

This would produce:

When the list displays, either because the user clicked the arrow button, pressed Alt + the down arrow key or because you decided to display it, the control fires a DropDown event, which is of type EventArgs.

If the user sees an item that he or she wants or was asked to select, he or she can click it. After an item has been clicked, two things happen: 1. the list retracts (or collapses) like a plastic; 2. the item that was clicked fills the text part and becomes the new selection:

Selecting an existing item in a DropDown combo box After selecting an item from a DropDown combo box

On the other hand, after displaying the list, if the user doesn't want to select anything from the list, he or she can click the arrow again or click anywhere away from the list. The list would collapse and the text part would get back to the previous text.

One of the major characteristics of a DropDown style of combo box, as compared to the type we will see next, is that, if the user knows for sure that the item he or she is looking for is in the list, he can first delete the string in the text box part of the control, then start typing. For example, if the list contains a string such as Social Sciences , the user can delete the text part, and start typing so. If there is only one item that starts with s, the user can then click the arrow twice and the item would be selected. Imagine the list contains such items as Jules and Julienne, if the user types the first common letters of these item and double-click the arrow, the first item that has these letters would be selected. This means that, if the user wants to other item to be selected, he or she should type the letters beyond the common ones. In the case of Jules and Julienne, if the user wants Julienne to be selected from an incomplete string, he or she can type juli and click the arrowed button twice.

The Drop Down List

Another style of combo box is gotten by setting the DropDownStyle to DropDownList. This type also is made of a text box on the left and a down-pointing arrowed button on the right side. It also may appear empty when it comes up, depending on how it was created. The biggest difference between a DropDown combo box and a DropDownList combo box is that, with the drop down list, the user can only select from the list: he or she cannot type anything in the text box part of the control.

Once again, to use the control, the user can click its arrow, which causes the list to display. The user can also display the list using the keyboard by pressing Alt + down arrow key after giving focus to the control.

The Simple Combo Box

The last type of combo box is called a simple combo box and is gotten by setting the DropDownStyle to Simple. After setting this value, you must heighten the control to get the desired size. This type of combo box is also made of two parts but they are distinct. The top section of the combo box displays a text box. Immediately under the text box, there is a list box. The following is the Character dialog box of OpenOffice.org. Its Font property page is equipped with the Font, the Typeface, and the Size combo boxes that are of a Simple style:

The Simple Combo Box

Notice that the control doesn't display a down-arrow pointing button on the right side of the selected item since the list is available already. To use this combo box, the user can examine the list part. If he or she sees the desired item, he can click it. When an item is clicked, it becomes the string of the top text part. If the user clicks a different item, it would become the new selection, replacing the one that was in the text part. Although this appears as a list box, the user cannot select more than one item.

The most regularly used combo boxes are made of text items. You can also create a combo box that displays colors or pictures. To create such a combo box, you start by changing the value of the DrawMode property that is set to Normal by default. If you want to display items that are not just regular text, you can set this property to either OwnerDrawFixed, which would make all items have the same height, or OwnerDrawVariable, which allows different items to have different sizes.

If the combo box has a DropDownStyle other than Simple, there is typically a fixed number of items that display when the user clicks the controlís arrow. You can control the number of items that displays using the MaxDropDownItems property. By default, this is set to 8. If the list contains a number of items less than the MaxDropDownItems integer value, all of the items would display fine. If the list contains more than the MaxDropDownItems number of items, when the user clicks the arrow, a vertical scroll box would appear. The control would display MaxDropDownItems number of items; to reveal more, the user would have to scroll in the list.

 

Previous Copyright © 2007-2012 FunctionX Next