当列宽 ="Auto"时，WPF GridSplitter 出现奇怪的行为

Question

我的布局非常简单，看看:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MinWidth="200"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="Auto" MinWidth="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0"
            BorderBrush="Red"
            BorderThickness="2">
        <!-- Any picture-->
        <Image Source="/Resources/PreviewTest.png"></Image>
    </Border>
    <GridSplitter Grid.Column="1" 
                    Width="5"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Stretch"
                    ResizeBehavior="PreviousAndNext"></GridSplitter>
    <Expander Grid.Column="2"
                ExpandDirection="Left"
                BorderBrush="RoyalBlue"
                BorderThickness="2">
        <!-- Any picture-->
        <Image Source="/Resources/PreviewTest.png"></Image>    
    </Expander>
</Grid>

问题:当我将 GridSplitter 拖动到左侧时，右列从窗口边框中伸出，如动画所示。我发现当第三列的宽度设置为“自动”(Width="Auto")时会发生这种情况。如果我设置 Width="*" GridSplitter 工作正常，第三个 Column 不会从窗口边框出去。那么为什么当 Width="Auto" 时会发生这种情况呢？

Answer 1

您的问题是由于您的其中一个 ColumnDefinition 设置为 Auto 引起的。发生的情况是，当第一列达到其 MinWidth 值时，它无法变得更小。但是，如果您不断移动 GridSlitter，则右列必须增大。当你让它增长到任意大小时，你就会遇到当前的问题。

要解决此问题，您所需要做的就是将正确的 ColumnDefinition.Width 属性也设置为 * 值。这样，它就不能再脱离Grid了。如果需要，您可以使用 ColumnDefinition.MaxWidth 属性控制列的最终大小。试试这个:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MinWidth="200" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" MinWidth="50" />
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" BorderBrush="Red" BorderThickness="2">
        <Image Source="/Resources/PreviewTest.png" />
    </Border>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" VerticalAlignment="Stretch" ResizeBehavior="BasedOnAlignment" />
    <Expander Grid.Column="2" ExpandDirection="Left" BorderBrush="RoyalBlue" BorderThickness="2">
        <Image Source="/Resources/PreviewTest.png" />
    </Expander>
</Grid>