UWP - Horizontal ListView example

UWP - Horizontal ListView

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

The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default.

The ListView control displays its items vertically. But UWP app developers can display the ListView item collection horizontally. The following app development tutorial code will demonstrate how we can display the ListView data horizontally as a horizontal list.

The ItemsControl class’s ItemsPanel property gets or sets the template that defines the panel that controls the layout of items. This property value is an ItemsPanelTemplate instance that defines the panel to use for the layout of the items. The ItemsControl’s default value is an ItemsPanelTemplate that specifies a StackPanel.

The UWP app developers can create a horizontal ListView by creating a template that specifies a horizontal StackPanel and set it as the ItemsPanel property.

In this UWP tutorial code, we data bind the ListView control with a String array. We also attach a selection changed event to catch the user selection. We displayed the ListView items horizontally. To do that, we used an ItemsPanel. Then we put an ItemsPanelTemplate inside the ItemsPanel. The ItemPanelTemplate holds a StakPanel control whose orientation is horizontal. As a result, the ListView control’s items are displayed in a horizontal layout.

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"
            Height="75"
            SelectionChanged="ListView1_SelectionChanged"
            ScrollViewer.HorizontalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollMode="Enabled"
            ScrollViewer.IsHorizontalRailEnabled="True"
            Background="PaleGoldenrod"
            >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </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();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Yellow",
                "Blue",
                "Black",
                "White",
                "Brown",
                "Orange",
                "Gray",
                "Cornsilk",
                "Cyan",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Data bind the list view with array items
            ListView1.ItemsSource = colors;
        }


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

            // Get the list view selected item text
            string selectedText = ListView1.SelectedItem.ToString();

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

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