UWP - ListView multi select example

UWP - ListView multi-select

The ListView class represents a control that displays data items in a vertical stack in a UWP app. The UWP app developers are using a ListView to display a collection of items stacked vertically or horizontally.

By default, the ListView selection mode is single. But the UWP app developers can set the mode to multiple by setting the ListView class SelectionMode property. The ListViewSelectionMode enumeration value allows multi-selection or disabled selection.

The ListView() constructor initializes a new instance of the ListView class. The ItemsControl class ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property lets us populate the ListView control with items from a string array.

The SelectionChanged event occurs when the currently selected item changes. When the ListView selection mode is multiple, we must loop through the selected items collection to get them all. The ListViewBase class’s SelectedItems property gets the currently selected items. This property value is an IList which is a collection of the currently selected items. The default value of this property is an empty collection. So, utilizing this property we can get the ListView controls selected items.

The following UWP app development tutorial demonstrates how we can allow the user to select multiple items from a ListView control. Here we data bind the ListView control with a String array. And set a selection change event for the ListView control. As a result, when the user makes changes to the ListView items selection the SelectionChanged event occurs and we can get the user’s selected item or items programmatically.

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" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="50"
        >
        <TextBlock
            x:Name="TextBlock1"
            Foreground="Crimson"
            FontFamily="MV Boli"
            FontSize="25"
            Text="Select item(s) from ListView."
            TextWrapping="WrapWholeWords"
            Margin="5,5,5,25"
            />
        <ListView 
            x:Name="ListView1"
            SelectionChanged="ListView1_SelectionChanged"
            SelectionMode="Multiple"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;


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

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Blue",
                "Yellow",
                "Black",
                "Gray",
                "White",
                "Snow",
                "Gold"
            };

            // Specify the list view item source
            ListView1.ItemsSource = colors;
        }

        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the instance of ListView
            ListView listView = sender as ListView;

            // Initialize an empty string to store list view selected items
            string selectedItems = "";

            // Loop through the list view selected items
            foreach (string item in listView.SelectedItems)
            {
                // Add a comma separator
                if (selectedItems.Length > 1)
                {
                    selectedItems += ", ";
                }

                // Add the items to selected items string
                selectedItems += item;
            };

            // Finally, display the list view selected items to text block
            TextBlock1.Text = "Selected : " + selectedItems;
        }
    }
}