列宽="自动"时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向左拖动时,右栏从窗口边框出来,如动画所示.我发现当第三列的宽度设置为"Auto"(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>