如何让WPF XAML中可调整大小的Grid列自动填充剩余空间

问题原因 #

你当前外层Grid的第一列设置了Width="Auto"，这会让列宽仅适配内部内容的宽度，而非占据剩余空间。垂直方向布局正常是因为底部行用了Height="*"来填充剩余空间——对应到水平方向，你需要把第一列的宽度设置为*，同时调整GridSplitter的属性确保它能正确调整相邻列的宽度。

修复步骤 #

1. 调整外层Grid的列定义：将第一列的Width设为*（占据剩余空间），保留MinWidth="200"确保最小宽度；第三列可根据需求设为Auto（适配内容）或*（平分剩余空间）。
2. 给水平方向的GridSplitter添加ResizeBehavior="PreviousAndNext"和ResizeDirection="Columns"属性，明确它负责调整左右相邻列的宽度。

修改后的完整XAML代码 #

<Grid>
    <Grid.ColumnDefinitions>
        <!-- 第一列设为*，占据剩余空间，保留最小宽度 -->
        <ColumnDefinition Width="*" MinWidth="200"></ColumnDefinition>
        <ColumnDefinition Width="4"></ColumnDefinition>
        <!-- 第三列设为Auto适配内容，若需要占剩余可改为* -->
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <!-- Left Panel -->
    <Grid Grid.Column="0" Background="LightSlateGray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="4"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <!-- Left Panel | Top -->
        <Grid Grid.Row="0">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10 10 10 10">Test</TextBlock>
        </Grid>
        
        <!-- Left Panel Grid Splitter -->
        <GridSplitter Grid.Row="1" Height="4" HorizontalAlignment="Stretch" Background="LightGray" ></GridSplitter>

        <!-- Left Panel | Bottom -->
        <Grid Grid.Row="2">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Test</TextBlock>
        </Grid>
    </Grid>

    <!-- Horizontal Grid Splitter -->
    <GridSplitter Grid.Column="1" 
                  Height="Auto" Width="4" 
                  VerticalAlignment="Stretch" 
                  Background="LightGray"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Columns" ></GridSplitter>

    <!-- Right Panel -->
    <Grid Grid.Column="2">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Test</TextBlock>
    </Grid>
</Grid>

补充说明 #

• 若希望右侧面板也占据剩余空间，可将第三列的Width改为*，此时第一列和第三列会按比例分配剩余空间，拖动GridSplitter可调整两者占比。
• MinWidth="200"确保左侧列不会被拖至小于200的宽度，符合你的初始设置。

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