网格和图像重叠边框？答案

【问题标题】：Grid and image overlapping Border?网格和图像重叠边框？
【发布时间】：2012-03-21 23:33:57
【问题描述】：

您好，我正在尝试将图像的角变圆，或者将我的边框重叠在图像的顶部，但我尝试的任何方法似乎都不起作用。

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

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

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

【问题讨论】：

标签： c# asp.net html wpf xaml

【解决方案1】：

为清晰起见更新了 XAML 和更多 cmets：

Grid 的边界正确，带有圆角。这里真正的问题应该是：

是否可以在 Grid 中包含的元素上重叠 Grid Border？

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。您可以调整属性以匹配您的按钮图像。

这是我的测试截图，其中一张图片保持原样，另一张剪裁到几何形状：

希望这会有所帮助。

【讨论】：

我收到错误“图像”类型中找不到可附加属性“剪辑”
@Garrith 检查我的编辑。确保您已将 Clip 标签放置在正确的位置。
@down voter：很高兴知道为什么我的回答被否决了。即使是简短的评论也会有所帮助。
洪流由于某种原因非常出色，但不确定为什么我的剪辑标签不起作用，但我猜它是结束关闭 /> 就像您在回答中提到的那样。最初我认为它不起作用，但高度和宽度并不直接暗示图像工具提示显示上的尺寸比。但我终于搞定了。

【解决方案2】：

不，因为您的图像是 jpg 并且背景是固定颜色，所以它不会起作用，如果您无法获取或使用 PS 删除角落并另存为 PNG，请尝试 GIMP。然后背景将是透明的。

【讨论】：