Magnus Lindhe

ListBox with grid layout in WPF

I have not used WPF much and I felt that I needed to hone my skills. I wanted to layout several list items in a grid. This is what I came up with.

The ListBox is a good control to base this on. It has support for several items, selection and scrolling. They layout of items needs to be changed into a grid. This is achieved by applying a different ItemsPanelTemplate. I choosed the WrapPanel but the UniformGrid can also be used:


I wanted to style the items in the ListBox as cards. This can be achieved by applying a DataTemplate to the ListBox like this:

        <Grid Width="332" Background="#4CFFFFFF">
                <ColumnDefinition Width="132*"/>
                <ColumnDefinition Width="200*"/>    
                <RowDefinition Height="40"/>
            <Grid Grid.RowSpan="3" Margin="0,0,12,0" Background="{Binding Color}" Width="120" Height="120" HorizontalAlignment="Left">
                <TextBlock Text="{Binding Id}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" Foreground="White"/>
            <TextBlock Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Title}" FontSize="16" VerticalAlignment="Center"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="{Binding Description}" TextWrapping="Wrap"/>

Items in a ListBox are wrapped by a ListBoxItem and it will need some styling to get that card look I wanted:

    <Style TargetType="ListBoxItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="6"/>

It was a good excercise in WPF and I am happy with the result. This is how it looks:

ListBox with grid layout

Colors courtsey of Flat UI Colors.

comments powered by Disqus