WPF中GridSplitter拖动时底部Auto行反向缩放问题咨询

我来帮你拆解这个问题的根源~

先看你提供的测试XAML代码：

<Window x:Class="TestWpfApp.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="CornflowerBlue">
            <TextBlock>Title</TextBlock>
        </Border>
        <Border Grid.Row="1" Background="LightSkyBlue">
            <TextBlock>Sub-title</TextBlock>
        </Border>
        <Border Grid.Row="2">
            <TextBlock>Auto sizing element</TextBlock>
        </Border>
        <GridSplitter Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" />
        <Border Grid.Row="4" Background="CornflowerBlue">
            <TextBlock>Header</TextBlock>
        </Border>
        <Border Grid.Row="5">
            <TextBlock>Auto sizing element</TextBlock>
        </Border>
        <Border Grid.Row="6" Background="LightSkyBlue">
            <TextBlock>Footer</TextBlock>
        </Border>
    </Grid>
</Window>

问题原因 #

这个异常的核心是GridSplitter的默认尺寸调整逻辑和Grid行的布局结构不匹配：

• GridSplitter默认会尝试调整它所在行的上一行和当前行的高度，但你把它放在了高度固定为5的第3行，这一行无法被调整。
• Grid的尺寸分配规则是：优先满足Auto和固定高度的行，剩下的空间再分配给*行。当GridSplitter找不到可调整的相邻行时，会自动跳过固定高度/Auto的行，去寻找最近的*行——也就是第2行和第5行。
• 窗口总高度是固定的，当你拖动GridSplitter调整第2行和第5行的高度时，中间的第4行（Auto高度）会因为上下*行的尺寸变化，被“推挤”着向相反方向移动，看起来像是在反向缩放。

快速修复建议 #

要让GridSplitter只调整你期望的两行，你可以给它明确指定调整行为，同时确保它作用的是相邻的可调整行：

<GridSplitter Grid.Row="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Center" 
              Height="5"
              ResizeDirection="Rows"
              ResizeBehavior="PreviousAndNext"/>

另外，如果你想让中间的Auto行（第4行）保持位置不变，建议把第2行、GridSplitter行、第5行放在一个嵌套Grid里，这样外层Grid的Auto行就不会被影响了。

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