# Quick Start

## Content

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:

* Set the **Content** property to "Comedy".
* Set the **Height** property to "25".

5. Set **c1ComboBoxItem2**’s properties as follows:

* Set the **Content** property to "Drama".
* Set the **Height** property to "25".

6. Set **C1ComboBoxItem3**’s properties as follows:

* Set the **Content** property to "Science Fiction".
* Set the **Height** property to "25".

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:

```vbnet
Imports System.Collections.Generic
```

```csharp
using System.Collections.Generic;
```

5. Add the following code to the **C1ComboBox1\_SelectedIndexChanged** event handler:

```vbnet
'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
```

```csharp
//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:![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/combobox/quickstart/emptycombos.png)
2. Click the second combo box's drop-down arrow and observe that the drop-down list is empty:![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/combobox/quickstart/twocombosemptydrop.png)
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:![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/combobox/quickstart/twocomboscomedy.png)
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:

![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/combobox/quickstart/twocombosdrama.png)

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:

![](https://cdn.mescius.io/document-site-files/images/47c7dd3c-b586-44f5-903c-f615f88e343f/images/combobox/quickstart/twocombosscifi.png)

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