The following quick start guide is intended to get you up and running with ComboBox for WPF. In this quick start, you'll create a new Visual Studio project with two C1ComboBox  controls. The first control will be populated with a list of three items that, when clicked, will determine the list that appears in the second combo box.

Create an Application

1. In Visual Studio, select File | New | Project.
2. In the New Project dialog box, select WPF Application.
3. Enter a Name and Location for your project and click OK to create the new application.
4. In the Visual Studio Toolbox, locate the StackPanel control and double-click to add it to your page. Edit the StackPanel's properties to reflect the following:
   • Width = "300"
   • Height = "35"
   • Orientation = Horizontal
5. Locate the ComboBox control in the Toolbox and add two controls to the StackPanel by double-clicking the control. These two controls will be named, by default, combobox1 and combobox2.
6. Edit combobox1's properties to reflect the following:
   • Width = "150"
   • Height = "35"
   • Name = "Category"
7. Edit combobox2's properties to reflect the following:
   • Width = "150"
   • Height = "35"
   • Name = "Shows"

You have completed the first step of the quick start by creating a WPF project and adding two C1ComboBox controls to it. In the next step, you'll add items to the first C1ComboBox control.

Add Items to the ComboBox

In the last step, you created a project and added two C1ComboBox controls to it. In this step, you will add three items to the first combo box.

Complete the following steps:

1. Select the first C1ComboBox, Category.
2. In the Properties window, click the Items ellipsis button to open the Collection Editor: Items dialog box.
3. Click Add three times to add three C1ComboBoxItems to the control. Three C1ComboBoxItems named c1ComboBoxItem1, c1ComboBoxItem2, and c1ComboBoxItem3, are added to the control.

4. Set c1ComboBoxItem1’s properties as follows:

5. Set c1ComboBoxItem2’s properties as follows:

6. Set C1ComboBoxItem3’s properties as follows:

7. Click OK to close the Collection Editor: Items dialog box.

In this step, you added items to the first combo box. In the next step, you will add code to the project that will populate the second combo box with items when a user selects an item in the first combo box.

Adding Code to the Control

In the last step, you added items to the first combo box. In this step, you will add code to the project that will populate the second combo box according to the option the user selects in the first combo box.

1. Select the first C1ComboBox control (“Category”).
2. In the Properties window, click the Events button.
3. Double-click the inside the SelectedIndexChanged text box to add the C1ComboBox1_SelectedIndexChanged event handler. The MainPage.xaml.cs page opens.
4. Import the following namespace into your project:

Visual Basic	Copy Code
Imports System.Collections.Generic

C#	Copy Code
using System.Collections.Generic;

5. Add the following code to the C1ComboBox1_SelectedIndexChanged event handler:

Visual Basic

Copy Code

'Create List for Comedy selection Dim dropDownList_Comedy As New List(Of String)() dropDownList_Comedy.Add("Absolutely Fabulous") dropDownList_Comedy.Add("The Colbert Report") dropDownList_Comedy.Add("The Daily Show") dropDownList_Comedy.Add("The Office") 'Create List for Drama selection Dim dropDownList_Drama As New List(Of String)() dropDownList_Drama.Add("Breaking Bad") dropDownList_Drama.Add("Desperate Housewives") dropDownList_Drama.Add("Mad Men") dropDownList_Drama.Add("The Sopranos") 'Create List for Science Fiction selection Dim dropDownList_SciFi As New List(Of String)() dropDownList_SciFi.Add("Battlestar Galactica") dropDownList_SciFi.Add("Caprica") dropDownList_SciFi.Add("Stargate") dropDownList_SciFi.Add("Star Trek") 'Check for SelectedIndex value and assign appropriate list to 2nd combo box If Category.SelectedIndex = 0 Then Shows.ItemsSource = dropDownList_Comedy ElseIf Category.SelectedIndex = 1 Then Shows.ItemsSource = dropDownList_Drama ElseIf Category.SelectedIndex = 2 Then Shows.ItemsSource = dropDownList_SciFi End If

C#

Copy Code

//Create List for Comedy selection List<string> dropDownList_Comedy = new List<string>(); dropDownList_Comedy.Add("Absolutely Fabulous"); dropDownList_Comedy.Add("The Colbert Report"); dropDownList_Comedy.Add("The Daily Show"); dropDownList_Comedy.Add("The Office"); //Create List for Drama selection List<string> dropDownList_Drama = new List<string>(); dropDownList_Drama.Add("Breaking Bad"); dropDownList_Drama.Add("Desperate Housewives"); dropDownList_Drama.Add("Mad Men"); dropDownList_Drama.Add("The Sopranos"); //Create List for Science Fiction selection List<string> dropDownList_SciFi = new List<string>(); dropDownList_SciFi.Add("Battlestar Galactica"); dropDownList_SciFi.Add("Caprica"); dropDownList_SciFi.Add("Stargate"); dropDownList_SciFi.Add("Star Trek"); //Check for SelectedIndex value and assign appropriate list to 2nd combo box if (Category.SelectedIndex == 0) { Shows.ItemsSource = dropDownList_Comedy; } else if (Category.SelectedIndex == 1) { Shows.ItemsSource = dropDownList_Drama; } else if (Category.SelectedIndex ==2) { Shows.ItemsSource = dropDownList_SciFi; }

In the next step, you will run the project and observe the results of this quick start. 

Run the Application

In the previous three steps, you created a WPF project with two combo boxes, added items to the first combo box, and wrote code that will populate the second combo box with items once an item is selected in the first combo box. In this step, you will run the project and observe the results of this quick start.

Complete the following steps:

1. Select Project | Run Project to run the project. The project loads with two blank combo boxes:

2. Click the second combo box's drop-down arrow and observe that the drop-down list is empty:

3. Click the first combo box's drop-down arrow and select Comedy.
4. Click the second combo box's drop-down arrow and observe that the drop-down list features the following items:

5. Click the first combo box's drop-down arrow and select Drama.
6. Click the second combo box's drop-down arrow and observe that the drop-down list features the following items: 

7. Click the first combo box's drop-down arrow and select Science Fiction.
8. Click the second combo box's drop-down arrow and observe that the drop-down list features the following items:

 

Congratulations! You have completed the ComboBox for WPF quick start.