为什么 Visual Studio 的设计器与我在运行时看到的不匹配？答案

【问题标题】：Why Doesn't Visual Studio's Designer Match What I See At Runtime?为什么 Visual Studio 的设计器与我在运行时看到的不匹配？
【发布时间】：2016-01-10 04:36:58
【问题描述】：

我是 WPF 新手，使用 Visual Studio (2015) 的设计视图创建示例应用程序。在设计时，一切看起来都很像我想要的：

但是当我运行应用程序时，它看起来完全不同。

我发现了一个类似但不完全相同的问题 (Run time View of WPF Window doesn't match the Design View of Expression Blend)，其中在 Blend 中创建的布局在运行时不匹配。这个问题 (Different look in design-mode and at runtime) 涉及到动态资源。

我没有做任何聪明的事情，只是一个网格和控件。我没有用模板修改任何外观。我使用了拖放功能，所以我的网格可能有点草率......但我真的希望它能够匹配。

我做错了吗？设计器与运行时不匹配似乎很疯狂……下面是我的代码。

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

【问题讨论】：

除其他外。如果你添加你的行高 = 195，不计算窗口标题，这样就会砍掉它。宽度是 344，所以你的 350 就可以了。

标签： c# wpf visual-studio-2015

【解决方案1】：

我真的找不到任何话要说为什么......但我确实找到了一个词。

在你的窗口属性中添加 SizeToContent="WidthAndHeight"...我的在预览和调试中看起来都很美味。

【讨论】：

【解决方案2】：

您需要确保这些对匹配：

高度/宽度
d:DesignHeight / d:DesignWidth

这里是difference between DesignWidth and Width，基本上都是一个用于设计器，一个用于实际运行时应用程序。

所有这些都应该在 UserControl 中设置。查看 UserControl Xaml 或 Window Xaml 的最后一行并添加缺少的内容 + 确保它们匹配。祝你好运！

【讨论】：

【解决方案3】：

与您的发布版本相比，您的尺寸的起始参考点必须在设计视图中位于不同的位置。我在 C++/C# 中遇到过类似的事情，我唯一的解决方法是测试几个小时并应用更正，最终使设计看起来不正确，同时修复发布版本。

希望对你有帮助。

【讨论】：