UWP - How to use ListView

UWP - How to use ListView
The ListView class represents a control that displays data items in a vertical stack. The UWP app developers can use ListView to display a collection of items stacked vertically or horizontally. But to display a collection in rows and columns they have to use a GridView.

The ListView is an ItemsControl, so the ListView can contain a collection of items of any type. To populate the ListView the UWP developers have to add items to the Items collection or set the ItemsSource property to a data source.

The ListView data item is displayed as the string representation by default. But the UWP developers can use DataTemplate and ItemTemplate to customize the ListView items layout.

The following Universal Windows Platform application development tutorial demonstrates how we can use a LisTview control. Here we will show the very basic uses of ListView control in a UWP app.

In this UWP tutorial code, we put some items into a ListView control using the XAML language. Then we add a SelectionChanged event to the ListView control. We display the ListView selected item on a dialog when the user changes the ListView selection.

The ListView SelectionChanged event occurs when the currently selected item changes. This event type is SelectionChangedEventHandler. The SelectionChangedEventHandler delegate represents the method that will handle the SelectionChanged event.

The SelectionChangedEventHandler(object sender, SelectionChangedEventArgs e) method has two parameters named sender and e. The sender parameter is an Object which is the object to which the event handler is attached. And the e parameter is a SelectionChangedEventArgs which is the event data.

The ListView class SelctedItem property gets or sets the selected item. This property is inherited from Selector. This property value is an Object which is the selected item. The default value is null.

The MessageDialog class represents a dialog for showing messages to the user.
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"
        >
        <ListView 
            x:Name="ListView1" 
            Header="Choose A Color"
            SelectionChanged="ListView1_SelectionChanged"
            >
            <x:String>Red</x:String>
            <x:String>Green</x:String>
            <x:String>Blue</x:String>
            <x:String>Yellow</x:String>
            <x:String>Black</x:String>
            <x:String>Gray</x:String>
            <x:String>Orange</x:String>
            <x:String>White</x:String>
            <x:String>Crimson</x:String>
        </ListView>
    </StackPanel>
</Page>
MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;


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

        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e) {
            // Get the instance of ListView
            ListView listView = sender as ListView;
            
            // Get the ListView selected item text
            string selectedText = listView.SelectedItem.ToString();

            // Initialize a new message dialog
            MessageDialog dialog = new MessageDialog("Selected : " +  selectedText);

            // Finally, display the selected item text on dialog
            dialog.ShowAsync();
        }
    }
}
More uwp tutorials