UWP - How to use ComboBox ItemsSource

UWP - ComboBox ItemsSource

The ComboBox class represents a selection control that combines a non-editable text box and a drop-down list box that allows UWP app users to select an item from a list. The ComboBox starts in a compact state and it expands to display a list of selectable items. The ComoboBox control is also known as a drop-down list.

The following UWP app development tutorial code demonstrates how we can use the ItemsSource property to data bind a ComboBox control. In this UWP example code, we populate the ComboBox with items from a String data type list. Here we applied a selection changed event for the ComboBox control to get its selected item when the app user makes the selection change.

The ItemsControl class’s ItemsSource property gets or sets an object source used to generate the content of the ItemsControl such as a ComboBox control. The ItemsSource property value type is an Object instance. This Object is used to generate the content of the ItemsControl such as the ComboBox. The ItemsSource property default value is null.

So the UWP app developers can data bind the ComboBox control using the ItemsControl class’s ItemsSource property. They just have to set the ItemsSource property value to the specified array or list or any items collection.

MainPage.xaml

<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="stack_panel1" 
        Orientation="Horizontal"
        Background="YellowGreen"
        Padding="100"
        >
        <ComboBox 
            x:Name="ComboBox1" 
            Header="Select A Color"
            SelectionChanged="ComboBox1_SelectionChanged"
            >
        </ComboBox>
        <TextBlock
            x:Name="TextBlock1"
            FontFamily="Consolas"
            FontSize="25"
            Foreground="Navy"
            Margin="50,5,5,5"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using System.Collections.Generic;
using System;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new list of colors
            List<String> colors = new List<String>();

            // Put some colors to the list
            colors.Add("Red");
            colors.Add("Green");
            colors.Add("Blue");
            colors.Add("Yellow");
            colors.Add("Black");
            colors.Add("Olive");
            colors.Add("Pink");
            colors.Add("White");
            colors.Add("Magenta");

            // Finally, Specify the ComboBox items source
            ComboBox1.ItemsSource = colors;
        }

        private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the ComboBox instance
            ComboBox comboBox = sender as ComboBox;

            // Get the ComboBox selected item text and display on TextBlock
            TextBlock1.Text = "You selected:\n";
            TextBlock1.Text += comboBox.SelectedValue.ToString();
        }
    }
}