CODEWITHSUNDEEP
wpftemplatesxamllistview
David Brunelle
David Brunelle

Reputation: 6430

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

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?

Upvotes: 2

Views: 3124

Answers (2)

Pieter Breed
Pieter Breed

Reputation: 5689

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>

Upvotes: 6

Rich
Rich

Reputation: 36806

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>

Upvotes: 6

Related Questions