WPF控件运行时尺寸与设计视图不符，如何修复？

问题现象 #

使用Visual Studio 2022 Community创建WPF应用时，底部的TextBox控件在运行时仅显示为一条窄线，需轻微调整窗口大小后才会显示为设计视图中的预期样式（至少4行高度），调整Margin属性无效。

问题原因 #

这是WPF布局初始化时的时序问题：DockPanel首次渲染时，未正确计算底部TextBox的高度空间，窗口尺寸变更触发重新布局后，布局引擎才会修正控件尺寸计算。

解决方案 #

方案1：手动触发初始化布局更新 #

在窗口加载完成后强制刷新布局，确保TextBox尺寸正确计算：

1. 在XAML的Window标签中添加加载事件绑定：

<Window x:Class="FontViewer.MainWindow"
        ...
        Loaded="Window_Loaded">

2. 在代码后台添加事件处理：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    SampleText.UpdateLayout();
}

方案2：改用Grid布局替代DockPanel #

Grid布局的计算逻辑更稳定，能从根源避免这类初始化布局异常，修改后的完整XAML如下：

<Window x:Class="FontViewer.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:FontViewer"
        mc:Ignorable="d"
        Title="Font Viewer" Height="480" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 顶部提示区域 -->
        <Border Grid.ColumnSpan="2"
                CornerRadius="6"
                BorderThickness="1"
                BorderBrush="Gray"
                Background="LightGray"
                Padding="8"
                Margin="4 4 4 4">
            <TextBlock FontSize="14"
                       TextWrapping="Wrap">
                Select a font to view from the list below.
                You can change the text by typing in the region at the bottom.
            </TextBlock>
        </Border>

        <!-- 左侧字体列表 -->
        <ListBox x:Name="FontList"
                 Grid.Row="1"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}"
                 Margin="4 4 0 4"/>

        <!-- 中间预览区域 -->
        <StackPanel Grid.Row="1" Grid.Column="1" Margin="8 4 8 4">
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" 
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
                       FontSize="10"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4"/>
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" 
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
                       FontSize="16"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4"/>
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" 
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
                       FontSize="24"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4"/>
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}" 
                       FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
                       FontSize="32"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4"/>
        </StackPanel>

        <!-- 底部输入框 -->
        <TextBox x:Name="SampleText"
                 Grid.Row="2" Grid.ColumnSpan="2"
                 MinLines="4"
                 Margin="8 0 8 4"
                 TextWrapping="Wrap"
                 ToolTip="Type here to change the preview text.">
            The quick brown fox jumps over the lazy dog.
        </TextBox>
    </Grid>
</Window>

方案3：调整StackPanel的垂直对齐方式 #

给中间的StackPanel添加VerticalAlignment="Top"，避免它占据过多空间挤压底部TextBox：

<StackPanel Margin="8 4 8 4" VerticalAlignment="Top">

内容的提问来源于stack exchange，提问作者LP2X0X