how to keep an image over an image in xaml uwp

Question

I want to place an image in a circular shape and that shape should be over a grid and image. below is xaml code which will show where i want to place that circular shape with an image on it.I have place that circular shape using canvas on grid 2 but it shold be over image "sign_in_footer.png"

 <Grid Grid.Row="1" Background="White">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center"  Width="354"  Height="336">
                <!--<TextBox x:Name="emailBox" BorderThickness="0" Background="White" HorizontalAlignment="Left" Height="45" Width="246"  Margin="55,90,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />-->
                <TextBox x:Name="emailBox" Padding="50,5,5,5"  BorderThickness="0,0,0,2" BorderBrush="Gray"  Background="White" HorizontalAlignment="Left" Height="45" Width="246"  Margin="55,90,0,0" TextWrapping="Wrap" VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />                
                <Canvas Margin="58,-45,136,0">
                    <Image x:Name="mailLogo" Source="Assets/ic_mail.png" Height="41" Width="41" />
                </Canvas>
                <PasswordBox x:Name="passBox" Padding="50,5,5,5"   PasswordRevealMode="Hidden"  BorderThickness="0,0,0,2" BorderBrush="Gray"  Background="White" Height="45" Width="246"  Margin="5,50,0,0"  VerticalAlignment="Center"  FontSize="25" FontFamily="Segoe UI Light" />
                <Canvas Margin="58,-45,136,0">
                    <Image x:Name="passLogo" Source="Assets/ic_pass.png" Height="41" Width="41" />
                </Canvas>

                <Image Name="showimg" Source="Assets/show_pass.png"  Width="25" Height="50" Margin="50,30,40,10" Tapped="Image_Tapped" Stretch="Uniform"/>
                <TextBlock Name="showPass"
                    Text="Show Password"
                    Foreground="#303030"  
                    FontSize="15"
                    FontFamily="Koblenz Serial Medium" 
                    Margin="200,-45,15,20" />
            </StackPanel>
        </Grid>
        <Grid Grid.Row="2" Background="Transparent">
            <Canvas Margin="195,-90,10,10">
            <Canvas Background="Transparent">
                <Ellipse
          Canvas.Top="50"
          Canvas.Left="50"
          Canvas.ZIndex="2"
          Fill="#FFFFFF00"
          Height="75"
          Width="75"
          StrokeThickness="5"
          Stroke="#FF0000FF"/>
            </Canvas>
            </Canvas>
            <Image Source="Assets\sign_in_footer.png"  Stretch="Fill" />
            <TextBlock  Text="Forget Password ?" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,4,225,3" FontSize="14" />

        </Grid>[enter image description here][1]

Answer 1

I have place that circular shape using canvas on grid 2 but it shold be over image "sign_in_footer.png"

Canvas.ZIndex declares the draw order for the child elements of a Canvas. A higher z-order value will draw on top of a lower z-order value.Just set the Canvas.Zindex of the Image to -1 will work.

<Image Source="Assets\sign_in_footer.png" Stretch="Fill"  Canvas.ZIndex="-1"/>

If you don't set the Canvas.ZIndex value, then the last element declared in XAML is the element that draws on top. So if you want to draw the Ellipse on top of the Image, you can just change the code about Image to location before Ellipse. It also will work.

<Grid Grid.Row="2" Background="Transparent">
    <Image Source="Assets\sign_in_footer.png" Stretch="Fill"   />
    <Canvas Margin="195,-90,10,10">
        <Canvas Background="Transparent">
            <Ellipse
                Canvas.Left="50"
                Canvas.Top="50"
                Width="75"
                Height="75"
                Fill="#FFFFFF00"
                Stroke="#FF0000FF"
                StrokeThickness="5"
                Canvas.ZIndex="2" />
        </Canvas>
    </Canvas>        
    <TextBlock
        Margin="0,4,225,3"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="14"
        Text="Forget Password ?" />

</Grid>