WPF is showing a border at the bottom and on the right

Question

I am currently having the issue that WPF is showing a black line on the bottom and the right of my window.

In the window is only a stackpanel with Margin set to 0. Here is my Window Configuration:

<Window x:Class="test.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:test"
mc:Ignorable="d"
Title="test" 
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
ResizeMode="NoResize"
Background="White"
Margin="0"
Padding="0">

As you can see on the image there is a small black line. Does anyone know how to remove it?

Here is the entire xaml

<Window x:Class="TelefonPopup.Settings"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TelefonPopup"
        mc:Ignorable="d"
        Title="Telefonpopup Settings"
        SizeToContent="WidthAndHeight"
        WindowStartupLocation="CenterScreen"
        ResizeMode="NoResize">

    <Window.Resources>
        <Style TargetType="Label">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
        <Style TargetType="RadioButton">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10, 0"/>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label>Eingeschaltet:</Label>
        <StackPanel Orientation="Horizontal" Grid.Column="1">
            <RadioButton x:Name="rbtnOn">EIN</RadioButton>
            <RadioButton x:Name="rbtnOff">AUS</RadioButton>
        </StackPanel>

        <Label Grid.Row="1">Zeit:</Label>
        <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1">
            <TextBox x:Name="tbTime" VerticalAlignment="Center" FontSize="16" Margin="15,0,0,0"></TextBox>
            <Label>s</Label>
        </StackPanel>

        <Button x:Name="btnSave" Click="btnSave_Click" Margin="45,10" FontSize="14" Padding="3" Grid.Row="2" Grid.ColumnSpan="2">Speichern</Button>
    </Grid>
</Window>   

Answer 1

I've run into this issue before when using SizeToContent="WidthAndHeight" and ResizeMode="None". It's a layout rendering glitch issue in WPF due to internal math.

You can easily resolve it by adding SnapsToDevicePixels="True" to your Window.

SnapsToDevicePixels will ensure that elements are drawn on pixel boundaries during rendering.

Another option is to use UseLayoutRounding="True" which does its work during the Measure and Arrange passes.

I highly suggest that you read-up on these two properties and decide which is best for your app.