如何实现WPF应用响应式布局 解决全屏时Grid与StackPanel未铺满问题

问题原因 #

所有布局控件都使用了固定宽高、固定边距、固定对齐方式，所有参数都是适配你设计时908*600的窗口尺寸，窗口最大化后尺寸发生变化，固定参数无法适配全屏，就会出现无法铺满的问题。

修改方案 #

用Grid的行列划分来做自适应布局，不要用固定边距堆叠控件，修改后的完整代码如下：

<Window x:Class="POSApplication.POSSystem"
    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:POSApplication"
    mc:Ignorable="d"
    Title="POS System" Height="600.857" Width="908.571" Background="#04c582" Loaded="OnloadPage" ResizeMode="NoResize" WindowState="Maximized" WindowStyle="None">
    <Grid Name="MainGrid">
        <!-- 定义Grid行列结构，适配不同窗口尺寸 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="63"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="171"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 顶部导航栏，跨两列铺满顶部 -->
        <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Background="#04b550">
            <Label Content="POS Sytem" Margin="0,20,0,0" Width="120" Height="40" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"/>
            <!-- 退出按钮靠右对齐，不用固定左边距 -->
            <Button Content="Log Out" HorizontalAlignment="Right" Margin="0,-40,20,0" VerticalAlignment="Top" Width="100" FontWeight="Bold" Click="LogOut_Button_Click" Height="40" FontSize="20"/>
        </StackPanel>

        <!-- 左侧菜单，铺满左侧列所有空间 -->
        <StackPanel Grid.Row="1" Grid.Column="0">
            <Button Content="Customers" Height="54" FontSize="20" FontWeight="Bold" Name="Customers_Btn" Click="Customers_Btn_Click" Margin="0,0,0,10"/>
            <Button Content="Products" Height="54" FontSize="20" FontWeight="Bold" Name="Products_Btn" Click="Products_Btn_Click" Margin="0,0,0,10"/>
            <Button Content="Users" Height="54" FontSize="20" FontWeight="Bold" Name="User_Btn" Click="User_Btn_Click" Margin="0,0,0,10"/>
            <Button Content="Sale" Height="54" FontSize="20" FontWeight="Bold" Click="Sale_Btn"/>
        </StackPanel>

        <!-- 右侧内容区，铺满剩余所有空间 -->
        <WrapPanel Grid.Row="1" Grid.Column="1" Background="White" Name="main_panel" />
    </Grid>
</Window>

关键修改点说明 #

• 移除了MainGrid的负边距，默认铺满整个窗口
• 给Grid增加了行列定义，固定高度/宽度的区域用固定值，需要自适应的区域用*占满剩余空间
• 移除了所有容器的固定宽高、固定边距、对齐限制，通过Grid.Row和Grid.Column指定位置，自动适配所在区域的尺寸
• 顶部退出按钮改为右对齐，不用固定左边距，窗口宽度变化时始终保持在右侧

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