UWP - ComboBox DisplayMemberPath and SelectedValuePath

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 ItemsControl class’s DisplayMemberPath property gets or sets the name or path of the property that is displayed for each data item. This property value is a String instance that is the name or path of the property that is displayed for each data item in the control. The default value of this property is an empty string.

The Selector class’s SelectedValuePath property gets or sets the property path that is used to get the SelectedValue property of the SelectedItem property. This property value is also a String object that is the property path that is used to get the SelectedValue property of the SelectedItem property. The default value of this property is String.Empty.

The following UWP app development tutorial code demonstrates how we can use the DisplayMemberPath and SelectedValue path properties for ComboBox control. We data bind a list of objects with the ComboBox control.

We also add a selection changed event to the ComboBox control. The SelectionChanged event allows us to get the users selected item details when they make changes on selection. DisplayMemberPath and SelectedValuePath properties allow us to define the ComboBox item's text and value.

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="LightYellow"
        Padding="100"
        >
        <ComboBox 
            x:Name="ComboBox1" 
            Header="Select A Color"
            DisplayMemberPath="ColorName"
            SelectedValuePath="ColorValue"
            SelectionChanged="ComboBox1_SelectionChanged"
            >
        </ComboBox>
        <TextBlock
            x:Name="TextBlock1"
            FontFamily="Consolas"
            FontSize="25"
            Foreground="DarkGreen"
            Margin="50,5,5,5"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs


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


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

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

            // Put some items to the collection
            colors.Add(new color("INDIANRED", "#CD5C5C"));
            colors.Add(new color("SALMON", "#FA8072"));
            colors.Add(new color("CRIMSON", "#DC143C"));
            colors.Add(new color("DEEPPINK", "#FF1493"));
            colors.Add(new color("CORAL", "#FF7F50"));
            colors.Add(new color("ORANGE", "#FFA500"));
            colors.Add(new color("YELLOW", "#FFFF00"));
            colors.Add(new color("PEACHPUFF", "#FFDAB9"));

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

            // Define the both properties programmatically
            //ComboBox1.DisplayMemberPath = "ColorName";
            //ComboBox1.SelectedValuePath = "ColorValue";
        }

        public class color{
            public string ColorName { get; set; }
            public string ColorValue { get; set; }

            public color(string colorName,string colorValue) {
                this.ColorName = colorName;
                this.ColorValue = colorValue;
            }
        }

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

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