Заставить несколько гридсплиттеров работать правильно

Question

Итак, у меня есть макет XAML, который выглядит следующим образом:

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

Крайний левый GridSplitter (gridSplitterSx) работает так же, как мои ожидания: при его перемещении он корректно изменяет размер бежевого раздела и перемещает оранжевыйраздел вместе с ним, корректно уменьшая ширину раздела LightGoldenrodYellow.

Однако самый правый GridSplitter (gridSplitterDx) этого не делает: при перемещении раздел DarkSeaGreen сохраняет свою текущую ширину, а раздел кораллов -развернуто противоположным способом, которым я двигаю мышь.

То, чего я пытаюсь достичь, это: при перемещении gridSplitterDx секция DarkSeaGreen должна расширяться и перемещать секцию Coral влево, оставляя ее размер без изменений,сокращение LightGoldenrodYellow секции.

Есть какие-нибудь намеки на то, что я делаю неправильно?

Answer 1

Итак, для всех, кто заинтересовался, я смог решить свою проблему, переместив оранжевый раздел вместе с бежевым (закрыв их оба в сетку с двумя столбцами) и присвоив gridSplitterSx правильное поле, равное ширинеОранжевая секция;Я также переместил Коралловую Секцию вместе с DarkSeaGreen, также поместив их в одну Сетка, и присвоив gridSplitterDx левое поле, равное ширине Коралловой Секции.

Примерно так:

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

Для моего варианта использования этого было достаточно для решения проблемы;Я надеюсь, что это также будет полезно для кого-то еще