Question

您好我正在尝试围绕图像的角落或者在图像的顶部重叠我的边框，但是任何尝试的东西似乎都不起作用。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        ResizeMode="NoResize"
        AllowsTransparency="True"
        WindowStartupLocation="CenterScreen"
        BorderThickness="0,0,0,0"
        Background="Transparent"
        Title="MainWindow" Loaded="Window_Loaded" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="581" d:DesignWidth="733" SizeToContent="WidthAndHeight">
    <Border BorderThickness="6" BorderBrush="Black" CornerRadius="12" Padding="0.5"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid>

            <Image Height="543" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="711" Source="/WpfApplication1;component/Images/Login.jpg" ImageFailed="image1_ImageFailed" />

            <TextBox Height="38" HorizontalAlignment="Left" Margin="205,177,0,0" Name="textBox1" VerticalAlignment="Top" Width="299" Background="#00000000" BorderBrush="#00000000" BorderThickness="0" Text="Please enter your email address." FontSize="18" Foreground="White" TextChanged="textBox1_TextChanged" />
            <TextBox Background="#00000000" BorderBrush="#00000000" BorderThickness="0" FontSize="18" Foreground="White" Height="38" HorizontalAlignment="Left" Margin="205,256,0,0" Name="textBox2" Text="Please enter your password" VerticalAlignment="Top" Width="299" />
        </Grid>


    </Border>
</Window>

是否可以重叠网格上的边框？

你可以从这个屏幕转储中看到我的意思：

Corner

Answer 1

更新XAML以获得清晰度和更多评论：

Grid正确地镶有圆角。这里真正的问题是：

是否可以在网格中包含的元素上重叠网格边框？

AFAIK，这是不可能的。如果您希望将Grid中包含的所有内容裁剪到Border的角半径，则需要将Clip应用于Grid以便包含任何内容元素不与边界重叠。

    <Image 
        HorizontalAlignment="Center" 
        Margin="10" 
        Name="image2" 
        Stretch="None" 
        VerticalAlignment="Bottom" 
        Source="/test;component/login_btn.jpg"> <!-- Make sure it's not
                                                     a self closing tag
                                                     ending in "/>" -->
        <Image.Clip>  <!-- Image.Clip needs to be enclosed between
                           the Image opening tag (above) and
                           the Image closing tag (2 lines below). -->
            <RectangleGeometry RadiusX="18" RadiusY="18" Rect="0,0,103,30" />
        </Image.Clip>
    </Image>  <!-- Close the Image tag here. -->

图像的剪切区域定义为带圆角的RectangleGeometry。您可以调整属性以匹配按钮图像。

以下是我的测试的屏幕截图，其中一个图像保持原样，另一个图像被剪切到几何图形：

enter image description here

希望这有帮助。

Answer 2

不，它不会工作，因为你的图像是jpg并且背景是固定的颜色，如果你不能使用PS或者使用PS去除角落并保存为PNG，请尝试GIMP。然后背景将是透明的。

网格和图像重叠边框？

2 个答案: