Absolute z-order (across several DataTemplates)

Question

Ive a ListBox with a Canvas ItemsPanel that displays 2 different types of objects: NodeVMs and LinkLineVMs (using a CompositeCollection). Each VM object has a DataTemplate:
NodeVMs DataTemplate has a TextBlock (A)
LinkLineVMs DataTemplate has a Line (B) and a TextBlock (C) How get the following absolute z-order: A (top), C, B (bottom).

<ListBox>
    <ListBox.Resources>
        <DataTemplate DataType="{x:Type p:NodeVM}">
            <StackPanel>
                <TextBlock ... />
                ...
            </StackPanel>
        </DataTemplate>
        <DataTemplate DataType="{x:Type p:NetworkLinkVM}">
            <Grid>
                <Line ... />
                <TextBlock ... />
            </Grid>
        </DataTemplate>
    </ListBox.Resources>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" PreviewMouseUp="network_visualization_list_PreviewMouseUp" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
<ListBox>

Someone once said a picture is worth a 1000 words. Green rectangle == NodeVM, Line+small box == NetworkLinkVM. A is ok as link [-30] passes over other link BUT B is a problem as link [-31] box is hidden BELOW link [-32]

Answer 1

Set your ZIndex index in ListBox.ItemContainerStyle instead of your DataTemplate.

The reason for this is that all items are wrapped in a ListBoxItem, so you need to set the ZIndex on the ListBoxItem instead of on the DataTemplate

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Canvas.ZIndex" 
            Value="{Binding Converter={StaticResource GetObjectZIndexConverter}}" />
</Style>

You'll need a converter that checks the typeof your databound object, and returns the correct ZIndex based on if it's a NodeVM or NetworkLinkVM.

This will only set the ZIndex for your DataTemplates, but once those are sorted out, you can set the ZIndex of NetworkLinkVM's internal Line and TextBlock