Load template on top of another

Question

I have 2 templates created and I would like to know if it is possible to have one template on top of another, hopefully these images and a little more description will help me describe my problem I'm having:

So what I would like is for the first image to be at the front and the second image to be at the back, is there a way to do this and if so can someone please help?

Image 1 template XAML

<DataTemplate x:Key="PropertyNode1Template">
        <Grid VerticalAlignment="Top" HorizontalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Center" Grid.Row="0">
                <StackPanel Margin="2" Width="120" Orientation="Horizontal" Background="White"
                Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
                    <StackPanel.ContextMenu>
                        <ContextMenu DataContext="{Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
                            <MenuItem Header="Remove" Click="RemoveProperty_OnClick">
                                <MenuItem.Icon>
                                    <Image Source="Images/icon_remove.bmp"/>
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem Header="Add Scenario" Click="CreateScenario_OnClick">
                                <MenuItem.Icon>
                                    <Image/>
                                </MenuItem.Icon>
                            </MenuItem>
                        </ContextMenu>
                    </StackPanel.ContextMenu>
                    <Image Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Width="16" Height="16" Margin="5"/>
                    <Label Content="{Binding Name}" x:Name="NodeLabel" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10"/>
                </StackPanel>
            </Border>
            <Button Name="AddScenario" Click="AddScenarioButton_OnClick" Grid.Row="2" BorderThickness="0">
                <Button.Style>
                <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border BorderThickness="0">
                                        <ContentPresenter/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                        <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                            <Setter Property="Visibility" Value="Visible"></Setter>
                        </DataTrigger>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="False">
                            <Setter Property="Visibility" Value="Hidden"></Setter>
                        </DataTrigger>
                        </Style.Triggers>
                </Style>
                </Button.Style>
                <Border BorderThickness="1,1,1,1" VerticalAlignment="Center" Background="LightGray">
                    <Border.BorderBrush>
                        <DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <GeometryDrawing Brush="LightGray">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,50,50" />
                                                <RectangleGeometry Rect="50,50,50,50" />
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Border.BorderBrush>
                    <StackPanel Margin="2" Width="120" Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
                        <Image Source="{StaticResource ImageBkgPlus}" Width="16" Height="16" Margin="5"/>
                        <Label Width="70" FontSize="10" VerticalAlignment="Center" Content="Add Scenario">
                        </Label>
                    </StackPanel>
                </Border>
            </Button>
        </Grid>
    </DataTemplate>

Image 2 XAML tempalte

<DataTemplate x:Key="PropertyNodeTemplate">
        <Grid VerticalAlignment="Top" Name="OuterButtonGrid">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <Border Name="InnerBorder" CornerRadius="8,8,8,8" BorderBrush="LightGray" BorderThickness="2" Grid.Row="0">
            <Grid VerticalAlignment="Top" HorizontalAlignment="Center" Width="130" Name="InnerPropertyGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Setter Property="Background" Value="LightGray"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Background" Value="#FAE68E"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <Image Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Width="16" Height="16" Margin="8" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Label Name="PropertyTitle" Content="{Binding Name}" HorizontalAlignment="Center" Margin="5">
                </Label>
            </Grid>
        </Border>
            <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
                <Canvas.Style>
                    <Style TargetType="Canvas">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="False">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
                <Line Stroke="LightGray" StrokeDashArray="2 2" Y2="70"/>
            </Canvas>
            <Canvas HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Row="1">
                <Canvas.Style>
                    <Style TargetType="Canvas">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="False">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
                <Line Stroke="LightGray" StrokeDashArray="2 2" Y2="70"/>
            </Canvas>
            <Button Name="AddScenario" Click="AddScenarioButton_OnClick" Grid.Row="2" BorderThickness="0">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border BorderThickness="0">
                                        <ContentPresenter/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="False">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Border BorderThickness="1,1,1,1" VerticalAlignment="Center" Background="LightGray" CornerRadius="3,3,3,3">
                    <Border.BorderBrush>
                        <DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <GeometryDrawing Brush="LightGray">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,50,50" />
                                                <RectangleGeometry Rect="50,50,50,50" />
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Border.BorderBrush>
                    <StackPanel Margin="2" Width="120" Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
                        <Image Source="{StaticResource ImageBkgPlus}" Width="16" Height="16" Margin="5"/>
                        <Label Width="70" FontSize="10" VerticalAlignment="Center" Content="Add Scenario">
                        </Label>
                    </StackPanel>
                </Border>
            </Button>
        </Grid>
    </DataTemplate>

Answer 1

Look into Controlling z-order using the ZIndex Property - Windows Presentation Foundation User Education for understanding the z-index of items displayed on the screen.