Question

I have a View that is basically setup like this:

<Grid>
<ViewBox>
    <Grid>
        <ItemsControl ItemsSource="{Binding MyItems}"
                      ItemTemplate="{Binding Source={StaticResource MyItemsDataTemplate}}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</ViewBox>
</Grid>

The DataTemplate used here can be reduced to this:

<DataTemplate x:Key="AreaItemDisplayDataTemplate">
<Canvas Grid.ZIndex={Binding Z}>
    <Grid>
        // an shape is displayed here...
    </Grid>
</Canvas>

I would now expect the ZIndex to be bound to the Z property of the individual items. When i debug the code, i can also see, that the Z property getter is accessed when i would expect it (whenever i raise the propertychanged event for it, eg) so i assume the binding to work correctly.

However, the ZIndex is not working as expected. The binding to the value has no effect on the actual displayed Z Order. Where am i going wrong with this code?

Answer 1

The content of the DataTemplate gets wrapped in a ContentPresenter so the Canvas in the DataTemplate isn’t a direct child of the ItemsPanel Grid. That is the reason the ZIndex property doesn’t do anything.

Move the ZIndex Binding to the ItemContainerStyle and it should work.

<ItemsControl ItemsSource="{Binding MyItems}" 
              ItemTemplate="{Binding Source={StaticResource MyItemsDataTemplate}}"> 
    <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
            <Grid /> 
        </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.ZIndex" Value="{Binding Z}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>