WPF window layout looks different from VS designer when running

Question

I've recently been playing around with WPF a little bit. I'm a little confused as my program looks different when it's running from what I created in the designer.

I'm certain that there is a valid reason for this but I can't wrap my head around why something so basic has to be so "mysterious".

To be specific, I mean the bottom and right margin between the button and the inner border of the window.

Designer:

Running program:

Hope someone can help with this.

XAML:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Button Content="Button" HorizontalAlignment="Left" Margin="432,289,0,0"
            VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.387,-0.75"/>
</Grid>

Answer 1

That's simply because :

1. There are d:Width and d:Height that affect design time and Height and Width that affect the run time. so verify that they are both the same.
2. If you want to keep the margin from the bottom you have to specify it in XAML or click on the little margin holders from the bottom and the right.
3. Unless you have Expression Blend, Don't rely on the VS drag and drop, instead, write your own XAML.

Something like this would be very logical:

 HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" 

Answer 2

I had this issue as well and found a pretty easy solution for anyone else who runs into this.

1. Place a grid in the window, size as desired.
2. Set window height and width to auto
3. Set the window's SizeToContent as WidthAndHeight

Presto, the grid is a set size and the window will now size to it, no need to worry about the border or title bar.