Different position between designer view and compiled build

Question

In my first attempts to work with WPF I encountered a problem where coordinates that I choose in designer's view for buttons are different in what I see when I compile my program. Here's how it looks like:

enter image description here

Buttons are a little bit lower (cropped) in compiled version. Any ideas on what is happening here?

Code:

<Window
        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" mc:Ignorable="d" x:Class="Player.MainWindow"
        Title="Player" ResizeMode="CanMinimize" StateChanged="Window_StateChanged" Icon="Resources/radio.ico" WindowStartupLocation="Manual" Closing="Window_Closing" Left="0" d:DesignWidth="448" d:DesignHeight="110" Width="448" Height="110">
    <Grid Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button x:Name="nextButton" Content="Next" HorizontalAlignment="Left" Margin="32,38,0,0" VerticalAlignment="Top" Width="45" Click="nextButton_Click" Height="22"/>
        <TextBox x:Name="prevButton" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="209" IsEnabled="False" TextAlignment="Center"/>

    </Grid>
</Window>

It looks the same to me... are you sure you aren't just experiencing an optical illusion? For example, which circle is bigger: http://ankeshkothari.com/illusions/size-illusion.png — myermian, Mar 24 '14 at 01:13
But do you see that in the first image buttons are not cropped, while in the second picture they are? — martynaspikunas, Mar 24 '14 at 01:21
@martynaspikunas Have you taken the window border into account? — grizzly, Mar 24 '14 at 01:23
@martynaspikunas: Sorry, I thought you cropped the picture out on purpose because you meant that the buttons are not accurate in relation to the textbox. Might I suggest you post the code, otherwise it is too difficult to answer this question. — myermian, Mar 24 '14 at 01:25
@grizzly, no. But the thing is that when you work with WFA, you see buttons and other elements in the same position while looking at designer's view and compiled version. I am trying to achieve something similar with WPF. — martynaspikunas, Mar 24 '14 at 01:30
@martynaspikunas As m-y has mentioned, post the XAML code please. There might be another catch. — grizzly, Mar 24 '14 at 01:33
@martynaspikunas Check out this question: http://stackoverflow.com/questions/4831573/why-is-a-window-larger-in-runtime — grizzly, Mar 24 '14 at 01:39
@grizzly, it works. Thanks! If you want to get some points for your help, please edit your previous answer to my question. — martynaspikunas, Mar 24 '14 at 01:44

score 3 · Accepted Answer · edited May 23 '17 at 12:28

I opened up GIMP and put your images on top of each other, with the top of having 50% transparency and this is the result:

enter image description here

And voila - the XAML designer and the compiled output is identical. I would even assume that VS designer displays some sort of background-compiled version of your XAML to achieve this high-fidelity representation.

Back to your edited question: according to this question: Why is a window larger in runtime? you need to set the width/height on the Grid and set the SizeToContent attribute of the Window to WidthAndHeight.

Here is an updated version of your code:

<Window (...)
    SizeToContent='WidthAndHeight'>
        <Grid
            Height='110'
            Width='448'
            Margin="0">
(...)

And the result is: enter image description here

Different position between designer view and compiled build

1 Answers1