CODEWITHSUNDEEP
c#wpfvisual-studio-2015
Rob P.
Rob P.

Reputation: 15091

Why Doesn't Visual Studio's Designer Match What I See At Runtime?

I'm new to WPF and using Visual Studio (2015)'s Design view to create a sample application. At design time, everything looks pretty much like what I want: Design time image

But when I run the application, it looks quite different.Run time image

I found a similar, but not quite the same question (Run time View of WPF Window doesn't match the Design View of Expression Blend) with layouts created in Blend not matching at runtime. And this question (Different look in design-mode and at runtime) but that was involving a dynamic resource.

I'm not doing anything clever, just a grid and the controls. I haven't modified any appearances with templates. I've used the drag and drop functionality so my grid might be a little sloppy...but I'd really expect it to match.

Am I doing something wrong? It seems crazy that the designer wouldn't match the runtime...below is my code.

<Window x:Class="Chap01_01.MainWindow"
        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:Chap01_01"
        mc:Ignorable="d"
        Title="Customer" Height="160" Width="350" ShowInTaskbar="true" ResizeMode="NoResize" Topmost="True" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="35"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="100*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="87"/>
            <ColumnDefinition Width="85"/>
            <ColumnDefinition Width="43"/>
            <ColumnDefinition Width="35"/>
            <ColumnDefinition Width="94"/>
        </Grid.ColumnDefinitions>
        <Label Content="_First Name" Grid.Column="0" Grid.Row="0" Margin="5,5,5,5" Target="{Binding ElementName=firstName}" VerticalAlignment="Center" />
        <TextBox x:Name="firstName" Grid.Column="1" Grid.Row="0" Margin="5,5,5,5" VerticalContentAlignment="Center" Grid.ColumnSpan="4"/>

        <Label Content="_Last Name" Grid.Column="0" Grid.Row="1" Margin="5,5,5,5" Target="{Binding ElementName=lastName}" VerticalAlignment="Center" />
        <TextBox x:Name="lastName" Grid.Column="1" Grid.Row="1" Margin="5,5,5,5" VerticalContentAlignment="Center" Grid.ColumnSpan="4"/>

        <RadioButton x:Name="radioButton" Content="EU Citizen" Grid.Column="1" Margin="5,5,5,5" Grid.Row="2" VerticalContentAlignment="Center" Grid.ColumnSpan="2"/>
        <RadioButton x:Name="radioButton2" Content="Non EU Citizen" Grid.Column="3" Margin="5,5,5,5" Grid.Row="2" VerticalContentAlignment="Center" Grid.ColumnSpan="2"/>
        <Button x:Name="okay" Content="Okay" Grid.Column="4" HorizontalAlignment="Right" Margin="0,0,5,5" Grid.Row="3" VerticalAlignment="Bottom"  Width="75"/>
        <Button x:Name="cancel" Content="Cancel" Grid.Column="2" HorizontalAlignment="Right" Margin="0,0,0,5" Grid.Row="3" VerticalAlignment="Bottom"  Width="75" Grid.ColumnSpan="2"/>
    </Grid>
</Window>

Upvotes: 10

Views: 5095

Answers (3)

Khalil Khalaf
Khalil Khalaf

Reputation: 9397

You need to make sure that these couple pairs match:

  1. Height / Width
  2. d:DesignHeight / d:DesignWidth

Here is the difference between DesignWidth and Width, and basically both are one for the designer and one for the actual run time application.

All of these should be set in the UserControl. Look at the last line of your UserControl Xaml or Window Xaml and add what is missing + make sure they match. And Good luck!

Upvotes: 0

Jamie Nicholl-Shelley
Jamie Nicholl-Shelley

Reputation: 679

It must be that in the design view a starting reference point for your dimensions is located differently as compared to your release build. I have experienced this with a similar type of thing in C++/C#, My only fix was to test for hours and apply corrections that ultimately make the design appear incorrect whilst fixing the release version.

I hope that helps.

Upvotes: -1

Bubba
Bubba

Reputation: 295

I couldn't really find anything to say WHY...but I did find a word-around.

Add SizeToContent="WidthAndHeight" in your window attributes...Mine looked delicious in both preview and debug.

Upvotes: 8

Related Questions