WPF GridSplitter Column Width="Auto" 时的奇怪行为

Posted 2023-03-11

【中文标题】WPF GridSplitter Column Width="Auto" 时的奇怪行为

【英文标题】：WPF GridSplitter strange behavior when Column Width="Auto"

【发布时间】：2014-08-16 21:57:57

【问题描述】：

我的布局很简单，看：

<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"会发生呢？

【参考方案1】：

您的问题是由于您的ColumnDefinitions 之一设置为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>