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>

blend adds design time attributes for your xaml , http://stackoverflow.com/questions/75495/wpf-usercontrol-design-time-size — eran otzap, Sep 30 '13 at 18:53
As I said, I mean the bottom and right margin between the button and the inner border of the window. I'll replace the first screenshot. — bitfrickler, Sep 30 '13 at 18:55
Post the relevant XAML. **Solution:** Don't use the Visual Studio designer. — Federico Berasategui, Sep 30 '13 at 18:58

score 23 · Answer 1 · answered Nov 04 '15 at 12:58

23

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

Place a grid in the window, size as desired.
Set window height and width to auto
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.

answered Nov 04 '15 at 12:58

Lightor

483
3
7

1

Once I followed this advice, designing the layout became a breeze. Thanks. – Milan Egon Votrubec Jun 10 '20 at 10:03

HichemSeeSharp · Accepted Answer · 2013-09-30T19:18:50.913

7

That's simply because :

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

edited Sep 30 '13 at 19:18

answered Sep 30 '13 at 19:00

HichemSeeSharp

3,240
2
22
44

Thank you! So the VS designer is just crap?! I applied your changes to the XAML and now the margins are correct. I will install Blend tomorrow and see if that works better. – bitfrickler Sep 30 '13 at 19:18
From my experience Blend drag and drop always gave me a better clean XAML. Though I recommend that you read about Layout controls. They will give you a nice and flexible UI. – HichemSeeSharp Sep 30 '13 at 19:21
Thanks. Will do that. – bitfrickler Sep 30 '13 at 19:31

score -1 · Answer 3 · answered Sep 30 '13 at 18:59

Seems like its the space of the border and the top bar. when changing the window style property of the window to none (WindowStyle="None"), it seems like the button is placed as the designer.

VS considers that you wish the window size to include the borders and the title bar.

WPF window layout looks different from VS designer when running

3 Answers3