Как сохранить изображение над изображением в xaml uwp

Question

Я хочу поместить изображение в круглую форму, и эта форма должна быть над сеткой и изображением. ниже XAML код, который покажет, где я хочу, чтобы поместить эту круглую форму с изображением на it.I имеет место, что круглая форма с использованием холста на сетке 2, но shold быть над изображением «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

у меня есть место, круглая форма, используя холст на сетке 2, но shold быть более изображения «sign_in_footer.png»

Canvas.ZIndex объявляет порядок рисования для детей элементов Canvas. Высшее значение z-порядка будет нарисовано поверх нижнего значения z-порядка. Просто установите Canvas.Zindex изображения на -1 будет работать.

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

Если вы не установите значение Canvas.ZIndex, то последний элемент объявлен в XAML является элементом, который рисует на вершине. Так что, если вы хотите нарисовать Ellipse сверху Image, вы можете просто изменить код около Image в положение до Ellipse. Он также будет работать.

<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>