Layer system for images on a canvas

Question

I am trying to figure out how I can have a layer system for my app. I am adding images to an itemscontrol and they are all rendering one on top of the other.

                <ItemsControl Name="canvasDataBinding"
                                    HorizontalAlignment="Center" 
                                    Height="512"
                                    Width="512" 
                                    VerticalAlignment="Center" 
                                    ClipToBounds="True">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Transparent"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding Name}"
                                    Width="{Binding Width}"
                                    Height="{Binding Height}">
                            </Image>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                </ItemsControl>

For testing purposes, I tried adding Panel.Zindex="{Binding Zind}" inside the image control, and decrementing Zind every time a new image was added to the collection, but the images still render on top of each other.

I also thought about having multiple collections, each collection would be its own layer. I dont know how I would implement this with my current code though.

Edit: I added an ItemContainerStyle:

                    <ItemsControl.ItemContainerStyle>
                        <Style>
                            <Setter Property="Panel.ZIndex" Value="{Binding Zindex}" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>

Again I am binding the value of ZIndex to an int that I decrement before the image is added to the collection. It is still rendering one on top of the other.

Answer 1

You need to set your Canvas.Top, Canvas.Left, and Panel.ZIndex in the ItemContainerStyle so the property gets applied to the <ContentPresenter> that wraps each Image.

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.Top" Value="{Binding Y}" />
        <Setter Property="Canvas.Left" Value="{Binding X}" />
        <Setter Property="Panel.ZIndex" Value="{Binding Zindex}" />
    </Style>
</ItemsControl.ItemContainerStyle>

When your ItemsControl gets rendered, it actually renders like this

<Canvas>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
    <ContentPresenter>
        <Image />
    </ContentPresenter>
</Canvas>

which is why it doesn't work to set the property on the <Image> itself.