Making multiple gridsplitters work together correctly

Question

So, I have an XAML Layout that looks like this:

<Grid Background="white">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="cdMainmenu" Width="200" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="80" />
        <ColumnDefinition x:Name="cdReminders" Width="200" />
    </Grid.ColumnDefinitions>

    <Frame Grid.Column="0" Background="Beige" >
    </Frame>
    <Frame Grid.Column="2" Background="LightGoldenrodYellow" >
    </Frame>
    <Frame Grid.Column="4" Background="DarkSeaGreen" >
    </Frame>
    <Frame Grid.Column="1" Background="Orange" >
    </Frame>
    <Frame Grid.Column="3" Background="Coral" >
    </Frame>

    <GridSplitter Grid.Column="0" x:Name="gridSplitterSx" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="2" Background="Black" Margin="0,128,0,0" />

    <GridSplitter Grid.Column="4" x:Name="gridSplitterDx" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="2" Background="Black" Margin="0,173,0,0" ResizeBehavior="PreviousAndCurrent" />

</Grid>

The leftmost GridSplitter (gridSplitterSx) works as for my expectations: when moving it, it correctly resizes the Beige section and moves the Orange section along with it, correctly shrinking the width of the LightGoldenrodYellow section.

The rightmost GridSplitter (gridSplitterDx), however, doesn't: when moving it, the DarkSeaGreen section keeps its current width, and the Coral Section is expanded in the opposite way in which I am moving my mouse.

What I am trying to achieve is: when moving gridSplitterDx, the DarkSeaGreen section should expand and move the Coral section to the left, keeping its size untouched, shrinking down the LightGoldenrodYellow section.

Any hints on what I am doing wrong?

Answer 1

So, for anyone interested, I was able to solve my issue by moving the Orange section together with the Beige one (by closing them both into a Grid with two columns) and giving gridSplitterSx a right Margin equal to the width of the Orange Section; I also moved the Coral Section together with the DarkSeaGreen one, also by putting them together into a single Grid, and giving gridSplitterDx a left margin equal to the width of the Coral Section.

Something like this:

<Grid Background="white">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="cdMainmenu" Width="200" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition x:Name="cdReminders" Width="200" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Frame Grid.Column="0" Background="Beige">
        </Frame>
        <Frame Grid.Column="1" Background="Orange" Width="80" >
        </Frame>
    </Grid>
    <Frame Grid.Column="1" Background="LightGoldenrodYellow" >
    </Frame>
    <Grid Grid.Column="2" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Frame Grid.Column="0" Background="Coral" Width="80" >
        </Frame>
        <Frame Grid.Column="1" Background="DarkSeaGreen" >
        </Frame>
    </Grid>

    <GridSplitter Grid.Column="0" x:Name="gridSplitterSx" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="2" Background="Black" Margin="0,128,80,0" />

    <GridSplitter Grid.Column="2" x:Name="gridSplitterDx" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="2" Background="Black" Margin="80,173,0,0" />

</Grid>

For my use case, this was enough to solve the problem; I hope this will also be useful to someone else