如何在 xaml uwp 中将图像保持在图像之上

Question

我想放置一个圆形的图像，该形状应该位于网格和图像之上。下面是 xaml 代码，它将显示我想在 it.I 上放置带图像的圆形形状的位置已经使用 canvas 将圆形形状放置在网格 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

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

Canvas.ZIndex 声明 Canvas 的子元素的绘制顺序。较高的 z 顺序值将绘制在较低的 z 顺序之上 value.Just 将图像的 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>

如何在 xaml uwp 中将图像保持在图像之上

how to keep an image over an image in xaml uwp

overlay

image

uwp

uwp-xaml