UWP - How to change ListView item height

UWP - ListView Item Height

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. The ListView is an ItemsControl, so the ListView can contain a collection of items of any type. To populate a 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.

The following Universal Windows Platform application development tutorial demonstrates how we can set or change each item height in a ListView. Here we will also set or change each item’s maximum and minimum height in a ListView.

In the beginning, we populate an array with elements. Then we loop through the array. While looping through the array elements, we create a ListViewItem instance for each array item. We also set the ListViewItem content from the corresponding array element.

Now we set the height of the ListViewItem instance. We also set the minimum height and maximum height of the ListViewItem instance. Then we add the ListViewItem instance to the ListView item collection. Finally, the ListView shows the item with a specified height.The ListViewItem class represents the container for an item in a ListView control. The ListViewItem class provides the container for items displayed in a ListView control.

The ListViewItem class Height property gets or sets the suggested height of a FrameworkElement. The ListView Height property is inherited from FrameworkElement.

The FrameworkElement class provides a base element class for Windows Runtime UI objects. FrameworkElement defines a common API that supports UI interaction and the automatic layout system.

The FrameworkElement class Height property gets or sets the suggested height of a FrameworkElement. The Height property value is a Double value which is the height, in pixels, of the object. The default value is NaN. Except for the special NaN value, this value must be equal to or greater than 0.

The ListViewItem MinHeight property gets or sets the minimum height constraint of a FrameworkElement. This property is inherited from FrameworkElement. And the ListViewItem MaxHeight property gets or sets the maximum height constraint of a FrameworkElement. This property is also inherited from FrameworkElement.

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="25"
        >
        <ListView
            x:Name="ListView1"
            Height="500"
            >
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

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

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

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

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the item border as item separator
                item.BorderThickness = new Thickness(0, 0, 0, 2);
                item.BorderBrush = new SolidColorBrush(Colors.OrangeRed);

                // Set the list view item height

                /*
                    Height
                    Gets or sets the suggested height of a
                    FrameworkElement. (Inherited from FrameworkElement) 
                */
                item.Height = 75;

                /*
                    MinHeight
                        Gets or sets the minimum height constraint of a
                        FrameworkElement. (Inherited from FrameworkElement)                        

                */
                item.MinHeight = 50;

                /*
                    MaxHeight
                        Gets or sets the maximum height constraint of a
                        FrameworkElement. (Inherited from FrameworkElement) 
                */
                item.MaxHeight = 100;

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}