Два раздельных сплиттера, задействующих разные части окна

Question

При использовании сплиттера между 1 и 2 элементом он так же задействует 5 и 6 и тоже их двигает, как сделать так чтобы было 2 сплиттера отдельно для 1 2 и 5 6. Хоть второй сплиттер и описан, но он его как будто нет

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <GridSplitter Grid.Column="1" Grid.Row="0" ShowsPreview="False" Width="2"
                  HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    <Canvas Grid.Column="0" Background="LightBlue" Grid.Row="0">
        <TextBlock Text="1"/>
    </Canvas>
    <Canvas Grid.Column="2" Grid.Row="0" Background="LightBlue">
        <TextBlock Text="2"/>
    </Canvas>
    <Canvas Grid.ColumnSpan="3" Grid.Row="2">
        <TextBlock Canvas.Left="375" Text="3"/>
    </Canvas>

    <GridSplitter Grid.Column="1" Grid.Row="5" ShowsPreview="False" Width="2"
                  HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    <Canvas Grid.Column="0" Grid.Row="5" Background="LightBlue">
        <TextBlock Text="5"/>
    </Canvas>
    <Canvas Grid.Column="2" Grid.Row="4" Background="LightBlue">
        <TextBlock Text="6"/>
    </Canvas>
</Grid>

Answer 1

Сплиттер меняет размеры колонок в сетке. Следовательно разделить поведение сплиттеров в рамках одного грида не получится.

Я разделил на 2 грида, один в другом. Можно на 3, один старший и 2 внутри. Чтобы сохранить высоту как в исходнике, использовал процентные размеры строк.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="66*"/>
        <RowDefinition Height="33*"/>
    </Grid.RowDefinitions>
    <Grid Grid.ColumnSpan="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <GridSplitter Grid.Column="1" Grid.Row="0" ShowsPreview="False" Width="3"
            HorizontalAlignment="Center" VerticalAlignment="Stretch" />
        <Canvas Grid.Column="0" Background="LightBlue" Grid.Row="0">
            <TextBlock Text="1"/>
        </Canvas>
        <Canvas Grid.Column="2" Grid.Row="0" Background="LightBlue">
            <TextBlock Text="2"/>
        </Canvas>
        <Canvas Grid.ColumnSpan="3" Grid.Row="2">
            <TextBlock Canvas.Left="375" Text="3"/>
        </Canvas>
    </Grid>
    <GridSplitter Grid.Column="1" Grid.Row="1" ShowsPreview="False" Width="3"
            HorizontalAlignment="Center" VerticalAlignment="Stretch" />
    <Canvas Grid.Column="0" Grid.Row="1" Background="LightBlue">
        <TextBlock Text="5"/>
    </Canvas>
    <Canvas Grid.Column="2" Grid.Row="1" Background="LightBlue">
        <TextBlock Text="6"/>
    </Canvas>
</Grid>

Еще задал ширину сплиттеру в 3 пикселя, а то в 2 очень сложно попасть мышкой.

БЛОГ НА HUSL

Два раздельных сплиттера, задействующих разные части окна

Ответы (1 шт):