WPF运行时出现设计视图不存在的空白 布局显示不一致问题

问题原因 #

• WPF中Window的Height属性默认包含非客户区（标题栏、窗口边框）的尺寸，设计器预览时会默认渲染标准标题栏，占用约30px左右的高度，导致你按总高650px计算得出的583px侧边栏在设计时刚好适配，但运行时开启WindowStyle="None"后非客户区被完全移除，实际客户区高度等于你设置的Window总高650px，583px的侧边栏短了17px，因此底部出现空白。
• 你最初使用固定Margin+固定宽高的硬编码布局方式本身容错性极低，只要容器尺寸发生微小变化就会出现布局错位，不符合WPF布局系统的设计逻辑。

解决方案 #

你改用Grid行列定义的思路是完全正确的，只需要调整几个细节即可同时适配设计视图和运行时效果：

1. 删掉Grid上的固定Height="650"属性，让Grid自动填满整个Window的客户区
2. 把第二行的Height从固定600改为*，代表自动占用第一行之外的所有剩余空间
3. 把第二列的Width从固定1000改为*，代表自动占用第一列之外的所有剩余空间
4. 保留AllowsTransparency="True"配置，可避免WindowStyle="None"时可能出现的边缘残留间隙问题

修正后的完整代码如下：

<Window x:Class="GUIProject.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:GUIProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="650" Width="1200"
        WindowStyle="None"
        ResizeMode="NoResize" AllowsTransparency="True">

    <Grid Background="#FF34495E">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Rectangle x:Name="SidemenuWrapper" Grid.Column="0" Grid.Row="1" Fill="#FF2C3E50"/>
        <Rectangle x:Name="TopmenuWrapper" Grid.ColumnSpan="2" Grid.Row="0" Fill="#2c3e50"/>
        <Rectangle HorizontalAlignment="Left" Width="5" Fill="#FFE74C3C" Grid.RowSpan="2"/>
    </Grid>
</Window>

效果说明 #

修改后不需要再手动计算各元素的宽高：

• 设计视图中会自动适配设计器的客户区尺寸，侧边栏不会出现溢出
• 运行时会自动填充整个窗口客户区，不会出现底部空白
• 后续修改窗口尺寸、顶部栏高度、侧边栏宽度时，只需要修改对应行列的数值即可，不需要调整其他元素的属性

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