Windows Development / WinUI / ListView

ListView Control

Overview

The ListView control presents a collection of items in a customizable layout. It supports grid, list, and custom item templates, virtualized loading, selection, and drag‑and‑drop.

Usage

Below is a basic XAML example that creates a ListView with a simple item template.

<Window
    x:Class="MyApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <ListView ItemsSource="{Binding Items}" SelectionMode="Single">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <Image Source="{Binding Icon}" Width="32" Height="32" Margin="0,0,10,0"/>
                        <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Window>

Corresponding view model (C#):

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection Items { get; } = new();
    public MainViewModel()
    {
        Items.Add(new Item { Name = "Document 1", Icon = "Assets/doc.png" });
        Items.Add(new Item { Name = "Picture 2", Icon = "Assets/photo.png" });
        // Add more items...
    }
    // INotifyPropertyChanged implementation omitted for brevity
}
public class Item
{
    public string Name { get; set; }
    public string Icon { get; set; }
}

Key Properties

  • ItemsSource: Binds the list to a collection.
  • SelectionMode: Single, Multiple, or Extended selection.
  • ItemTemplate: Defines UI for each item.
  • IsItemClickEnabled: Enables click handling on items.
  • PlaceholderText: Text displayed when the list is empty.

Common Events

  • SelectionChanged: Fires when the selection changes.
  • ItemClick: Fires when an item is clicked (if enabled).
  • ContainerContentChanging: Handles virtualization and custom loading.

Interactive Sample

Try adding and removing items dynamically.

    Toggle Dark