How to add a combo box (XAML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This tutorial walks you through the steps to add a combo box to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add a combo box in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add a combo box in code at runtime.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Runtime apps using C# or Visual Basic
• Roadmap for Windows Runtime apps using C++

What you need to know

Technologies

• ComboBox

Prerequisites

• We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

Instructions

Step 1: Add a combo box in XAML

To add a combo box in XAML

1. Add a ComboBox control to a parent container.

2. To assign a name to the combo box, set the x:Name attribute to a string value.

   To refer to a control in code, it must have a name. Otherwise, a name is not required.

3. Add items to the combo box by populating the Items collection or by binding the ItemsSource property to a data source.

   Here's an example of how to populate the Items collection in XAML.

   <ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
       <x:String>Item 1</x:String>
       <x:String>Item 2</x:String>
       <x:String>Item 3</x:String>
   </ComboBox>
   

   Here's an example of how to bind the ItemsSource to a collection in XAML. The ItemsSource is bound to the DataContext of the ComboBox, which is set in code.

   <ComboBox ItemsSource="{Binding}" SelectionChanged="ComboBox_SelectionChanged" Width="100"/>
   

4. To perform an action when the combo box selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

   void MainPage::ComboBox_SelectionChanged(Object^ sender, SelectionChangedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub ComboBox_SelectionChanged()
       ' Add code to perform some action here.
   End Sub
   

   To check the selected item of the control outside of the SelectionChanged event, use the SelectedItem or SelectedIndex properties.

Step 2: Add a combo box in code

To add a combo box in code

1. Create a new ComboBox.

2. Add items to the combo box by populating the Items collection or by setting the ItemsSource property to a data collection.

3. To perform an action when the combo box selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

4. Add the ComboBox to a parent container in the visual tree to make the combo box show in the UI.

   Here's an example of how to add a ComboBox and populate the Items collection in code.

   // Create a new combo box, add items, and add a SelectionChanged handler.
   ComboBox comboBox1 = new ComboBox();
   comboBox1.Items.Add("Item 1");
   comboBox1.Items.Add("Item 2");
   comboBox1.Items.Add("Item 3");
   comboBox1.Width = 200;
   comboBox1.SelectionChanged += ComboBox_SelectionChanged;
   
   // Add the combo box to a parent container in the visual tree.
   stackPanel1.Children.Add(comboBox1);
   

   Here's an example of how to add a ComboBox and set the ItemsSource in code.

   // Data collection
   Platform::Collections::Vector<String^>^ fonts = 
       ref new Platform::Collections::Vector<String^>();
   fonts->Append("Item 1");
   fonts->Append("Item 2");
   fonts->Append("Item 3");
   
   // Create a new combo box, set it's items source, and add a SelectionChanged handler.
   ComboBox^ comboBox1 = ref new ComboBox();
   comboBox1->Width = 200;
   comboBox1->ItemsSource = fonts;
   comboBox1->SelectionChanged += 
       ref new SelectionChangedEventHandler(this, &MainPage::ComboBox_SelectionChanged);
   
   // Add the combo box to a parent container in the visual tree.
   stackPanel1->Children->Append(comboBox1);
   

   // Data collection
   List<string> fonts = new List<string>();
   fonts.Add("Item 1");
   fonts.Add("Item 2");
   fonts.Add("Item 3");
   
   // Create a new combo box, set it's items source, and add a SelectionChanged handler.
   ComboBox comboBox1 = new ComboBox();
   comboBox1.Width = 200;
   comboBox1.ItemsSource = fonts;
   comboBox1.SelectionChanged += ComboBox_SelectionChanged;
   
   // Add the combo box to a parent container in the visual tree.
   stackPanel1.Children.Add(comboBox1);
   

   ' Data collection
   Dim fonts = New List(Of String)()
   fonts.Add("Item 1")
   fonts.Add("Item 2")
   fonts.Add("Item 3")
   
   ' Create a new combo box, set it's items source, and add a SelectionChanged handler.
   Dim comboBox1 = New ComboBox()
   comboBox1.Width = 200
   comboBox1.ItemsSource = fonts
   AddHandler comboBox1.SelectionChanged, AddressOf Me.ComboBox_SelectionChanged
   
   ' Add the combo box to a parent container in the visual tree.
   stackPanel1.Children.Add(comboBox1)
   

   void MainPage::ComboBox_SelectionChanged(Object^ sender, SelectionChangedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub ComboBox_SelectionChanged()
       ' Add code to perform some action here.
   End Sub
   

   To check the selected item of the control outside of the SelectionChanged event, use the SelectedItem or SelectedIndex properties.

Step 3: Add a combo box using a design tool

To add a combo box using a design tool

1. Select the ComboBox control.

   • In Microsoft Visual Studio, pick the ComboBox in the Toolbox pane.

   • In Blend for Visual Studio, pick the ComboBox in the Assets pane.

     Select Controls in the left side of the Assets pane if it's not selected.

2. Add a ComboBox to the design surface. Do one of these:

   • Double-click the combo box. The combo box is added to the selected parent container with default position and size settings.
   • Drag the combo box to the design surface and drop it. The combo box is added in the position where you drop it with default size settings.
   • Draw the combo box control onto the design surface. The combo box is added with the size and position settings that you draw.

3. If you need to, assign a name to the ComboBox. With the combo box selected, type the name into the Name property text box.

   The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.

4. Add items to the combo box by populating the Items collection or by binding the ItemsSource property to a data source.

5. To perform an action when the combo box selection changes, add a handler for the SelectionChanged event. In the SelectionChanged event handler, add code to perform some action.

   1. Select the Event view in the Property pane.
   2. With the combo box selected on the design surface, do one of these:
      • Double click the SelectionChanged event text box to add a handler with a default name.
      • Type a name into the SelectionChanged event text box and press enter to add a handler with a custom name.

Related topics

ComboBox

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++