Multi-Column ListView

Ever wanted to have a multi column ListView in WPF? It’s not that hard once you get to know WPF.

We take a ListView and set the ItemsPanel to UniformGrid:

<Window x:Class="ColumnTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <ListView x:Name="MyList">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="3" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Window>

 

And the backend code:

using System.Windows;

namespace ColumnTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            for (int x = 0; x <= 100; x++)
            {
                this.MyList.Items.Add(x);
            }
        }
    }
}

 

Which results in:

Uniform Grid Result

  • Dave

    Nice work!
    very simple way to make multi column list boxes! And it was exactly what i was after!
    Thanks!

  • http://cockneycoder.wordpress.com Isaac

    Fantastic. Exactly what I was after.

  • Entire

    Thank you so much! I have been looking for similar stuff for hours and it’s that simple … :)

  • http://nanddonet.wordpress.com Fernando Urkijo

    Nic work! very helpfull!