xamlの画像に画像を保持する方法uwp

Question

画像を円形にしたい場合、その形状はグリッドと画像の上に置く必要があります。以下 は、私はit.I上の画像とその円形を配置したい場所を円形グリッド2上のキャンバスを使用して場所を持っているが表示されますが、それは画像の上に「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

ことSHOLD XAMLコードであります

Canvas.ZIndex私はグリッド2にキャンバスを使用して円形状の場所を持っていますが、それは オーバー画像「sign_in_footer.png」でSHOLDは、キャンバスの子要素の組み合わせ抽選の順番を宣言します。より高いzオーダー値が低いzオーダー値の上に描画されます。ImageのCanvas.Zindexを-1に設定するだけで問題ありません。

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

あなたはCanvas.ZIndex値を設定しない場合は、XAMLで宣言された最後の要素が一番上に描画要素です。したがって、Imageの上にEllipseを描画する場合は、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>