如何修复Grid控件调整大小时最后一列自动隐藏的问题

问题场景与代码 #

我在WPF中设计了一个多列布局的Grid，代码如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding TitleHeight, FallbackValue=40}" />
        <RowDefinition Height="{Binding TitleHeight, FallbackValue=40}"/>
        <RowDefinition Height="1"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <!-- Title Bar-->
    <DockPanel Grid.Row="0" Background="{StaticResource BlackBackground}">
        <StackPanel VerticalAlignment="Center">
            <ContentControl prism:RegionManager.RegionName="LogoButtonRegion" />
        </StackPanel>
        <StackPanel >
            <ContentControl prism:RegionManager.RegionName="MenuRegion"/>
        </StackPanel>
        <StackPanel >
            <ContentControl prism:RegionManager.RegionName="WindowControlRegion" />
        </StackPanel>
    </DockPanel>
    <!-- Tool Bar -->
    <StackPanel Grid.Row="1" Background="{StaticResource DarkBackGround}"/>
    <!-- Splitter For ToolBar and Main Region -->
    <Border Height="0.8" SnapsToDevicePixels="True" HorizontalAlignment="Stretch" Background="{StaticResource BlackBackground}" Grid.Row="2"/>
    <!-- Program Region -->
    <Grid Grid.Row="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" MinWidth="40" MaxWidth="150"/>
            <!-- Left Panel -->
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width="150"/>
            <!-- Quick Tool Panel -->
            <ColumnDefinition Width="1"/>
            <ColumnDefinition MinWidth="30"/>
            <!-- Main Content -->
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width="40"/>
            <!-- Properties Content -->
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width="40" MinWidth="40"/>
            <!-- Right Panel -->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="40"/>
            <RowDefinition Height="1"/>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <!-- Left Panel -->
        <materialDesign:ColorZone Mode="Accent" VerticalAlignment="Stretch" Grid.Column="0">
        </materialDesign:ColorZone>
        <GridSplitter ResizeDirection="Columns" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Style="{StaticResource GenegicGridSplitter}"/>
        <!-- Quick Tool Panel -->
        <Grid Grid.Row="0" Column="2" Background="{StaticResource DarkBackGround}"></Grid>
        <GridSplitter ResizeDirection="Columns" Grid.Row="0" Grid.Column="3" Style="{StaticResource GenegicGridSplitter}"/>
        <!-- Main Content -->
        <Grid Grid.Row="0" Grid.Column="4"></Grid>
        <GridSplitter ResizeDirection="Columns" Grid.Row="0" Grid.Column="5" Grid.RowSpan="3" Style="{StaticResource GenegicGridSplitter}" Panel.ZIndex="1" />
        <!-- Properties Content -->
        <Grid Grid.Row="0" Grid.Column="6" Grid.RowSpan="3" Background="{StaticResource DarkBackGround}"></Grid>
        <Border Grid.Row="0" Grid.Column="7" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{StaticResource BlackBackground}"/>
        <!-- Right Panel -->
        <Grid Grid.Row="0" Grid.Column="8" Grid.RowSpan="3" Background="{StaticResource DarkBackGround}">
            <StackPanel>
                <Button Content="Test"></Button>
            </StackPanel>
        </Grid>
        <GridSplitter ResizeDirection="Rows" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Style="{StaticResource GenegicGridSplitter}"/>
        <!-- Bottom Panel -->
        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" Background="{StaticResource DarkBackGround}">
            <StackPanel>
                <Button Content="Test"></Button>
            </StackPanel>
        </Grid>
    </Grid>
</Grid>

当调整Main content列和Properties content列的宽度时，若Main content列缩小至最小宽度，最后一列会自动隐藏。我希望避免这种情况，恳请提供可行的解决方案。

问题分析 #

从你的布局代码来看，问题出在列宽约束不足和Grid整体布局无最小宽度限制：

• Properties Content列（Grid.Column="6"）仅设置了固定宽度Width="40"，但没有MinWidth属性，当Main列缩小到最小宽度（30）后，继续拖动分隔线会挤压Properties列的宽度，直到它被压缩至0，进而导致右侧的最后一列被隐藏。
• 最外层Grid没有设置MinWidth，当窗口宽度小于所有列的最小总宽度时，Grid会自动调整列宽以适应空间，最终挤掉右侧的列。

解决方案 #

方案1：给Properties列添加最小宽度约束

修改Properties列的定义，添加MinWidth="40"，确保它始终保持至少40的宽度，不会被挤压消失：

<ColumnDefinition Width="40" MinWidth="40"/>
<!-- Properties Content -->

方案2：给外层Grid设置最小宽度

计算所有列的最小总宽度，设置为外层Grid的MinWidth，这样窗口无法缩小到不足以容纳所有列最小尺寸的宽度，从根源避免列被隐藏：

• 各列最小宽度总和：40（Left Panel） + 1*4（分隔线） + 150（Quick Tool） + 30（Main） + 40（Properties） + 40（Right） = 305

给最外层Grid添加MinWidth="305"：

<Grid MinWidth="305">
    <!-- 你的Grid内容 -->
</Grid>

方案3：优化GridSplitter的调整行为

确保Main与Properties之间的GridSplitter仅调整相邻的两列，设置ResizeBehavior="PreviousAndNext"，避免影响其他列的布局：

<GridSplitter ResizeDirection="Columns" Grid.Row="0" Grid.Column="5" Grid.RowSpan="3" 
              Style="{StaticResource GenegicGridSplitter}" Panel.ZIndex="1" 
              ResizeBehavior="PreviousAndNext"/>

组合建议 #

你可以同时使用方案1和方案2，这样既有列级的最小宽度保障，又有整体布局的宽度约束，双重避免列隐藏的问题。

内容的提问来源于stack exchange，提问作者Nguyễn Lâm