UWP - How to use ComboBox ItemTemplate

UWP - ComboBox ItemTemplate

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 ComboBox control is an ItemsControl that's why the UWP developers can put there a collection of items of any type. By default, the ComboBox data item is displayed as the string representation.

The ItemsControl class’s ItemTemplate property gets or sets the DataTemplate used to display each item. ItemTemplate property value is a DataTemplate instance which is the template that specifies the visualization of the data objects. The default value of this property is null. So using this ItemTemplate property the UWP developers can display custom-styled items inside a ComboBox.

The DataTemplate class describes the visual structure of a data object. This DataTemplate class is used for data binding for specific elements in the template that display the data values.

The ItemsControl class ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. ItemsSource property lets us populate the ComboBox control with items from a list of objects.

The following UWP app development tutorial demonstrates how the developers can display a ComboBox control’s complex items by using the ItemTemplate and DataTemplate instead of the default string representation.

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="Vertical"
        Background="LightSkyBlue"
        Padding="50"
        >
        <ComboBox 
            x:Name="ComboBox1" 
            Header="Select A Book"
            SelectionChanged="ComboBox1_SelectionChanged"
            >
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel 
                        Orientation="Vertical" 
                        Background="LightGoldenrodYellow"
                        Padding="8"
                        BorderBrush="Crimson"
                        BorderThickness="0,0,0,2"
                        >
                        <TextBlock
                            Text="{Binding BookName}"
                            FontWeight="Black"
                            FontFamily="Calibri"
                            FontSize="20"
                            TextWrapping="Wrap"
                            />
                        <TextBlock
                            Text="{Binding Author}"
                            FontStyle="Italic"
                            />
                        <TextBlock
                            Text="{Binding Price}"
                            Foreground="Navy"
                            />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </StackPanel>
</Page>

MainPage.xaml.cs

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


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

            // Initialize a new list of books
            List<Book> books = new List<Book>();

            // Add some items to collection
            books.Add(
                new Book(
                            "Professional Visual Studio 2012",
                            "Bruce Johnson",
                            "$59.99"
                    )
                );

            books.Add(
                new Book(
                            "Beginning ASP.NET for Visual Studio 2015",
                            "William Penberthy",
                            "$45.00"
                    )
                );

            books.Add(
                new Book(
                            "Beginning ASP.NET 4.5.1: in C# and VB",
                            "Imar Spaanjaars",
                            "$44.99"
                    )
                );

            books.Add(
                new Book(
                            "Professional C++, 3rd Edition",
                            "Marc Gregoire",
                            "$49.99 "
                    )
                );

            // Specify the ComboBox item source
            ComboBox1.ItemsSource = books;
        }

        public class Book
        {
            public string BookName { get; set; }
            public string Author { get; set; }
            public string Price { get; set; }

            public Book(string bookName, string author, string price)
            {
                this.BookName = bookName;
                this.Author = author;
                this.Price = price;
            }
        }

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

            // Get the ComboBox selected item as a Book
            Book selectedBook = comboBox.SelectedItem as Book;

            // Initialize a new message dialog
            MessageDialog dialog = new MessageDialog(
                "Selected : \n"
                + selectedBook.BookName + "\n"
                + selectedBook.Author + "\n"
                + selectedBook.Price
                );

            // Finally, display the selected item details on dialog
            dialog.ShowAsync();
        }
    }
}