Question

我想将图像放置在圆形形状中，并且该形状应该在网格和图像上。下面是xaml代码，它将显示我想要在其上放置带有图像的圆形形状的位置。我在网格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

我在网格2上使用画布放置了圆形形状，但它已经结束了 image＆＃34; sign_in_footer.png＆＃34;

Canvas.ZIndex声明Canvas的子元素的绘制顺序。较高的z阶值将绘制在较低的z阶值之上。只需将Image的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>

如何在xaml uwp中保留图像

1 个答案: