如何使用 GridSplitter 調整右外部 Grid 列的大小

Question

我的應用程序中有以下網格結構：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0"
          Visibility="{Binding LeftColumnVisibility, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="3"/>
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Column="0">
            <!-- Stuff -->
        </DockPanel>
        <GridSplitter Grid.Column="1" 
                      HorizontalAlignment="Stretch" 
                      ResizeBehavior="PreviousAndCurrent" 
                      ResizeDirection="Columns"/>
    </Grid>
    <DockPanel Grid.Column="1">
        <!-- More Stuff -->
    </DockPanel>
    <Grid Grid.Column="2" 
          Visibility="{Binding RightColumnVisibility, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="0" 
                      HorizontalAlignment="Stretch"
                      ResizeBehavior="CurrentAndNext" 
                      ResizeDirection="Columns" />
        <StackPanel Grid.Column="1">
            <!-- So Much Stuff -->
        </StackPanel>
    </Grid>
</Grid>

左列的大小調整按預期工作。
我可以調整左列的大小，在保持所需大小的同時隱藏/顯示它。

當我嘗試調整右列的大小時：

• 向左拖動 GridSplitter 時它什么也不做
• 向右拖動時，它會將 GridSplitter 本身的列（最后一個 Grid 的第 0 列）向左調整（然后在所有空間用完時向右調整）

我已經坐了很長時間了，並嘗試了我可能想到的屬性設置和網格嵌套的每一種組合。

在調整網格列的大小時，我希望中間列(Width="*")保持不變。 只有右列的大小應該改變，這樣中間的列仍然會用完所有剩余空間。

如何讓我的 GridSplitter 正確調整大小？

非常感謝。

Answer 1

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" Background="LightPink"/>
        <GridSplitter Grid.Column="1" 
                        Width="3"
                        ResizeBehavior="PreviousAndCurrent" 
                        ResizeDirection="Columns"/>
    </Grid>
    <Border Grid.Column="1" Background="LightGreen"/>
    <Grid Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="0" 
                        Width="3"
                        ResizeBehavior="CurrentAndNext" 
                        ResizeDirection="Columns"/>
        <Border Grid.Column="1" Background="LightCyan"/>
    </Grid>
</Grid>