当列宽=＆＃34; Auto＆＃34;时，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向左拖动时，右栏从窗口边框向外移动，如动画所示。我发现第三列的宽度设置为＆＃34; Auto＆＃34; （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>