Multiple Columns in WPF ListBox

In this article we will discuss ways to have multiple columns in WPF ListBox control and layout the ListBox such that each row has 3 items. All WPF controls deriving from ItemsControl provide an ItemsPanel property that allows us to replace the internal layout panel that arranges the items. So to have multiple columns in a ListBox we have to change the ItemsPanel property of the control.

WrapPanel

One of the most simple way of displaying content horizontally in ListBox is to have WrapPanel in ItemsPanel property of Listbox. But if we need to display fixed number of items in a row then we have to disable the horizontal scrollBar so that item get wrap to next row and set fixed width for ListBox. But as item get wrap the ListBoxItem are not positioned uniformly. So we have to set Width for each ListBoxItem so that all the items are positioned in a tabular way.

        <ListBox Width="300" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            
            <ListBoxItem Content="Visual Basic" Width="80"/>
            <ListBoxItem Content="Silverlight" Width="80"/>
            <ListBoxItem Content="ASP.NET" Width="80"/>
            <ListBoxItem Content="WCF" Width="80"/>
            <ListBoxItem Content="Web Services" Width="80"/>
            <ListBoxItem Content="Windows Service" Width="80"/>
        </ListBox>

UniformGrid

One of the drawback with WrapPanel was we had to disable horizontal scrollbar, set Width for ListBox and also width for ListBoxItem. So we can use UniformGrid instead of WrapPanel in ItemsPanel property and set Columns property of it to the number of items we need to display in a row. Using UniformGrid all the items in the ListBox will have same width and height.

        <ListBox>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            
            <ListBoxItem Content="Visual Basic" />
            <ListBoxItem Content="Silverlight" />
            <ListBoxItem Content="ASP.NET" />
            <ListBoxItem Content="WCF" />
            <ListBoxItem Content="Web Services" />
            <ListBoxItem Content="Windows Service" />
        </ListBox>

Grid

Although UniformGrid is the best solution for multiple column ListBox but sometime we don’t want all the columns in the ListBox of same size. Also in some scenario we could have a requirement where we need to merge two or more columns (or rows) for a larger text. In this situation using Grid is very useful option.

        <ListBox>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.8*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBoxItem Content="WCF"  Grid.Row="0" Grid.Column="0"/>
            <ListBoxItem Content="ASP.NET"  Grid.Row="0" Grid.Column="1"/>
            <ListBoxItem Content="VB.NET" Grid.Row="0" Grid.Column="2"/>
            <ListBoxItem Content="Silverlight" Grid.Row="1" Grid.Column="0"/>
            <ListBoxItem Content="Web Services" Grid.Row="1" Grid.Column="1"/>
            <ListBoxItem Content="Windows Service" Grid.Row="1" Grid.Column="2"/>
            <ListBoxItem Content="Windows Presentation Foundation" Grid.Row="2" Grid.ColumnSpan="3"/>
        </ListBox>

Only headache of using Grid in ItemsPanel is that we have to set RowDefinitions and ColumnDefinitions for the Grid. Also we have to set the Grid.Row and Grid.Column for each item to position them in the ListBox. But in some scenario as described above it is very useful.