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:

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

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>

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.


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.


You need to make sure that these couple pairs match:

  • Height / Width
  • 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!

    链接地址: http://www.djcxy.com/p/89708.html

    上一篇: 如何释放递归结构(trie)

    下一篇: 为什么Visual Studio的设计器与我在运行时看到的相符?