CODEWITHSUNDEEP
wpfxaml
blueshift
blueshift

Reputation: 881

How to prevent bottom edge of Grid from showing through Border

I am trying to make a simple login form with rounded corners. Below is a screenshot of the form:

enter image description here

There is a line segment at the bottom; it is transparent. Please show me how I can change my XAML to get rid of this line.

Here is my 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>

Upvotes: 0

Views: 93

Answers (2)

Peter Hansen
Peter Hansen

Reputation: 8907

Since the 4px border on the Border is the same color as the Grid you should just get rid of it.

If they are the same color, there usually are some visible lines where the transition from the border to the actual background happens like in this case.

I would fix it by setting the Background on the Border instead of the Grid, and completely removing the BorderThickness and BorderBrush properties from the Border.

Looks very fine on my computer :-)

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

Upvotes: 0

Miro Bucko
Miro Bucko

Reputation: 1133

Adding a margin of -1 is a quick hack but gets rid of it.

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

Upvotes: 1

Related Questions