WIN10 series: C # App Control Basics 4

ComboBox control

ComboBox The control contains a non-editable text box and a drop-down list, which is made up of multiple ComboBoxItem Sub-elements. Using the ComboBox control saves the interface space because the ComboBox control displays only the currently selected options, and you can view the other options by clicking the text box to expand the drop-down list. If you want all options to always be visible, you can use the listbox control (which is described later in theListBox control).

In a XAML file, the use of the ComboBox control is as follows:

<combobox .../>

- or -

<combobox ...>

<!-- Adding child elements -

</ComboBox>

The following describes the common properties of a ComboBox control:

• Name property to get or set the names of the ComboBox controls.
• Width property to get or set the thickness of the ComboBox control text box.
• Height property to get or set the width of the ComboBox control text box.
• The SelectedValue property, Gets or sets the option value that is selected in the ComboBox control drop-down list.
• The SelectedValuePath property gets or sets the path used to obtain the SelectedValue property value.

After describing the common properties, take a look at the common events of the ComboBox control:

• The SelectionChanged event that is triggered when a selection in the current list has changed.
• The tapped event, which is triggered when the TextBox control's text box is clicked.

Next, use the ComboBox control to design an example of an app that selects items in a drop-down list and displays the contents of the selected items.

Create a blank application project for the Windows store and name it Comboboxdemo. Add the following code to the grid element of the MainPage.xaml file.

<textblock horizontalalignment= "left" fontsize= "height=" margin= "478,443,0,0" textwrapping= "Wrap" Text = " Please select a " verticalalignment= "Top" width= "/> "

<textblock horizontalalignment= "left" margin= "478,538,0,0" textwrapping= "Wrap" text= " Display selection: "fontsize=" "verticalalignment=" Top "width=" height= "/> "

<textblock horizontalalignment= "left" name= "showselected" fontsize= "height=", margin= "607,538,0,0" textwrapping= "Wrap" verticalalignment= "Top" width= "155"/>

<combobox name= "Projectcombobox" selectedvaluepath= "Content" selectionchanged= "Projectcombobox_ SelectionChanged "height=" "width=" margin= "633,443,633,301" >

<comboboxitem content= " Project 1 "/>

<comboboxitem content= " Project 2 "/>

<comboboxitem content= " Project 3 "/>

</ComboBox>

The above code adds three TextBlock text blocks, the first two blocks of text to display the "Please select an item" and "Display selection" text information, and a third block of text to display the selected item content. A ComboBox control is then added, setting three ComboBoxItem list items, respectively, "Project 1", "Project 2", and "Project 3".

Open the MainPage.xaml.cs file to add an event-handling method projectcombobox_selectionchanged for the SelectionChanged event of the ComboBox control, The SelectionChanged event is triggered when an option in the drop-down list changes, and the text content of the selected item is displayed in the showselected text block, as shown in the following code:

private void Projectcombobox_selectionchanged (object sender, SelectionChangedEventArgs e)

{

// Display the selected item

Showselected.text = " you chose. "+ ProjectComboBox.SelectedValue.ToString ();

}

In the preceding code, use the SelectedValue property of the ComboBox control to get the contents of the selected list item and convert it to a string type through the ToString method, assigning the Text property of the block showselected to the text of the selected item in the foreground.

To run the program, a drop-down list box and two text messages are displayed in the interface, with the two text messages "Please select an item" and "Show Selection:", as shown in effect 4-7. Click the text box to expand the drop-down list, and select the Item 2 option in the drop-down list to display the selection in the interface, as shown in effect 4-8.

Figure 4-7 combobox control using Figure 4-8 after selecting options in the list item

WIN10 series: C # App Control Basics 4