How to resize right outer Grid column with GridSplitter

Question

I have the following Grid structure in my application:

<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>

The resizing of the left column works as expected.
I can resize the left column, hiding/showing it while it keeps the desired size.

When I try to resize the right column though:

• It does nothing when dragging the GridSplitter to the left
• It resizes the column of the GridSplitter itself (column 0 of the last Grid) to the left (and then to the right, when all space is used up) when dragging to the right

I've been sitting at this for quite some time now and tried every combination of property settings and Grid nestings I could possibly think of.

I want the middle column (Width="*") to be left unchanged when resizing the grid columns. Only the right column should change in size so that the middle column still uses up all remaining space.

How do I get my GridSplitter to resize properly?

Much obliged.

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>