如何防止Grid的下边缘通过Border显示

Question

我正在尝试制作一个带圆角的简单登录表单。以下是表单的截图：

底部有一个线段;它是透明的。请告诉我如何更改我的XAML以摆脱这一行。

这是我的XAML：

<Window x:Class="Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Login" WindowStyle="None"  AllowsTransparency="True" Background="Transparent" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="194" d:DesignWidth="358" SizeToContent="WidthAndHeight">
<Border BorderBrush="#9DE5F5" BorderThickness="4" CornerRadius="8" Width="343">
    <Grid Background="#9DE5F5" Width="337" ShowGridLines="False" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="108*" />
            <ColumnDefinition Width="286*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="FontSize"  Value="16" />
                <Setter Property="FontWeight" Value="DemiBold" />
                <Setter Property="VerticalAlignment"  Value="Center" />
                <Setter Property="HorizontalAlignment"  Value="Right" />
                <Setter Property="Padding"  Value="8" />
                <Setter Property="Foreground" Value="Black" />
            </Style>
            <Style TargetType="{x:Type TextBox}">
                <Setter Property="Margin" Value="5,10,15,5" />
                <Setter Property="FontSize" Value="16" />
            </Style>
            <Style TargetType="{x:Type PasswordBox}">
                <Setter Property="Margin" Value="5,10,15,5" />
                <Setter Property="FontSize" Value="16" />
            </Style>
        </Grid.Resources>
        <TextBlock Grid.Column="0" Grid.Row="0" >Username:</TextBlock>
        <TextBlock Grid.Column="0" Grid.Row="1" >Password:</TextBlock>
        <TextBox Grid.Column="1" Grid.Row="0" Name="txtUserName" Background="White" />
        <PasswordBox Grid.Column="1" Grid.Row="1" Name="txtPassword" Background="White" PasswordChar="*" />
        <Button Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" Margin="10,10,15,10" Width="80" FontWeight="Bold" FontSize="13" Background="SteelBlue">Login</Button>
        <Button Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" Margin="10,20,5,10" Width="30" Background="Red" Foreground="White" >X</Button>
    </Grid>
</Border>

Answer 1

添加-1的边距是一个快速的黑客，但摆脱它。

<Grid Background="White" Width="337" ShowGridLines="False"  Margin="-1">

Answer 2

由于Border上的4px边框与Grid的颜色相同，您应该摆脱它。

如果颜色相同，通常会有一些可见的线条，从边框到实际背景的过渡就像这种情况一样。

我会通过在Background上设置Border而不是Grid来修复它，并从BorderThickness中完全删除BorderBrush和Border属性{1}}。

在我的电脑上看起来非常好： - ）

<Border Background="#9DE5F5" CornerRadius="8" Width="343">
    <Grid ShowGridLines="False">
    ....
</Border>