XAML ListView - Stack items over each other

Question

How can you have a ListView (or similar Object) stack its items over each other. Like a real-life stack of newspaper or post cards.

where do I place this property? Just in the ItemsTemplate? How can I bind the Z-Index to the ListItem Index? — Daniel Hitzel, Sep 22 '15 at 18:07
Perhaps use the `ItemContainerStyle` to set a negative margin on each of the items so they overlap. You may also need to overwrite the `ItemsPanelTemplate` to use panel that allows overlapping children... I'm not sure if a StackPanel allows it by default. — Rachel, Sep 22 '15 at 18:40
Not Sure may Help [Check This](http://stackoverflow.com/a/5450993/2470362) — Abin, Sep 22 '15 at 18:56
I am programming a game, with a stack of cards. I want to have a fade away animation, when a new card is picked. There may be a lot of cards (like 50-70), so the margin approach may not be scalable. It would be fine to have them over each other at the same spot. — Daniel Hitzel, Sep 22 '15 at 20:11

score 3 · Accepted Answer · answered Sep 22 '15 at 20:23

Found a solution:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Items>
        <TextBlock Text="hallo" />
        <TextBlock Text="welt" />
    </ItemsControl.Items>
</ItemsControl>

score 2 · Answer 2 · answered Sep 22 '15 at 19:01

If you want items to overlap, you can simply set a negative margin.

For instance, with a simple ItemsControl:

<ItemsControl x:Name="ListView" Margin="5 75 5 0">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Stretch" Margin="0 -65 0 0" Background="White" CornerRadius="10" Height="80">
                <TextBlock Text="{Binding}"></TextBlock>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

And the render:

The same result can be achieved with a ListView, though it can be slightly more annoying since you may have to tweak the control's default margins.

XAML ListView - Stack items over each other

2 Answers2