Canvas Z Order issue

Question

Im trying to render a bunch of ellipses with lines coming out from the center, in north, east, south and west directions.

However, I also need all ellipses to be on top of all lines, not just on top of its own lines.

With the following code, I can't do this as each item template has its own canvas, and so setting the zindex wont help.

Any ideas of how I could solve this?

<Window x:Class="WpfApplication27.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="800" Width="800">
    <ItemsControl ItemsSource="{Binding Nodes}">
        <ItemsControl.Template>
            <ControlTemplate>
                <Grid>
                    <Canvas Name="PART_Canvas" IsItemsHost="True"/>
                </Grid>
            </ControlTemplate>
        </ItemsControl.Template>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <Line X1="25" Y1="25" X2="25" Y2="125" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="25" Y2="-75" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="125" Y2="25" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="-75" Y2="25" Stroke="Black"/>
                    <Ellipse Width="50" Height="50" Fill="Red"/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Window>

Answer 1

You could add 2 ItemsCotrols on top of each other bound to the same collection, the back one would render the lines and the front one renders the ellipse's

 <Grid>
    <Grid.Resources>
        <Style x:Key="NodeContainer" TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </Grid.Resources>

    <!--Line-->
    <ItemsControl ItemsSource="{Binding Nodes}" ItemContainerStyle="{StaticResource NodeContainer}">
        <ItemsControl.Template>
            <ControlTemplate>
                <Grid>
                    <Canvas Name="PART_CanvasBack" IsItemsHost="True"/>
                </Grid>
            </ControlTemplate>
        </ItemsControl.Template>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <Line X1="25" Y1="25" X2="25" Y2="125" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="25" Y2="-75" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="125" Y2="25" Stroke="Black"/>
                    <Line X1="25" Y1="25" X2="-75" Y2="25" Stroke="Black"/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <!--Ellipse-->
    <ItemsControl ItemsSource="{Binding Nodes}" ItemContainerStyle="{StaticResource NodeContainer}">
        <ItemsControl.Template>
            <ControlTemplate>
                <Grid>
                    <Canvas Name="PART_CanvasFront" IsItemsHost="True"/>
                </Grid>
            </ControlTemplate>
        </ItemsControl.Template>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <Ellipse Width="50" Height="50" Fill="Red"/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

</Grid>