How do I make WPF ListView items repeat horizontally AND vertically?

Question

Hi,

I have a listview where I would like to display things horizontally. That works fine, but now I would need to have them display like in a Windows Explorer type.

For example :

A B C

D E F

G H I

or

A B

C D

E F

G H

I

Is it possible in a listview?

Answer 1

Sounds like you're looking for WrapPanel. I don't think it works for ListView, but if you want a generic items container to use WrapPanel as it's layout, you can do this with ItemsControl and fill it with whatever elements you want. Something like the following:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Items>
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
        <TextBlock Margin="20" Padding="20" Text="Blah" Background="#999" />
    </ItemsControl.Items>
</ItemsControl>

Answer 2

If you want your items to all have the same size, I would go for a UniformGrid. It one of those overlooked controls, might be very useful in this situation.

This is how I made a quick-and-dirty toolbar:

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Command="{Binding}"
                    ToolTip="{Binding Tooltip}">
                <StackPanel Orientation="Vertical">
                    <Image Height="16"
                           Width="16"
                           RenderOptions.BitmapScalingMode="NearestNeighbor"
                           Source="{Binding Image}"
                           HorizontalAlignment="Center" />
                </StackPanel>
            </Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>