Using WrapPanel and ScrollViewer to give a multi-column Listbox in WPF

Question

Hi

I’m making a simple LOB app which loads data from an XML file and displays it in a list with a few buttons for editing.

In my first attempt, everything was ok except that the list scrolled downwards in one long column. I would prefer the data to wrap so that at the bottom of the Window it starts a second column, and so on – if you resize the Window the data should resize accordingly.

First, I just put the ListBox inside a ScrollViewer. This made no difference whatsoever.

Then, I added a WrapPanel within the ItemTemplate. At this point I got a long row horizontally but it never wrapped to a second row, despite my setting the ScrollViewer.HorizontalScrollbar=disabled.

I’ve searched around the web on various blogs and forums, but can’t see the difference between the suggestions and my code (included below). Any tips would be much appreciated.

<Window x:Class="MyApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="My App" Height="300" Width="400"
        FocusManager.FocusedElement="{Binding ElementName=eventsList}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
                <ScrollViewer Grid.Row="0" Grid.Column="0"     HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
            <ListBox Name="eventsList">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </ScrollViewer>

        <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal"     HorizontalAlignment="Center" Visibility="Collapsed">
            <Button Name="action1Button" />
            <Button Name="action2Button" />
            <Button Name="action3Button" />
        </StackPanel>
    </Grid>
</Window>

Answer 1

I believe to do this, you need to write custom code - you've got the right idea in overriding ItemsPanelTemplate, but WrapPanel doesn't order stuff the way you want it - it'll order stuff as:

A B C D
E F G H
I J K L

Whereas you probably want it:

A D G J
B E H K
C F I L

Also, by putting it in a ScrollViewer, it's like telling it that it has an infinitely sized screen, so the result will just be one row (because the ScrollViewer will give it as much room as it asks for). Writing a panel isn't hard, it's basically just two functions (Measure and Arrange).

Answer 2

Have you tried that ?

...
<ItemsPanelTemplate>
    <ScrollViewer>
        <WrapPanel IsItemsHost="True" />
    </ScrollViewer>
</ItemsPanelTemplate>
...