列寬=“自動”時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>