C # - Как создать интерфейс WPF с независимыми разделителями на том же столбце и / или строке?

Question

Я совершенно новичок в работе с интерфейсами Visual Studio 2019 WPF, но мне нужно создать демонстрационный проект для своей работы, чтобы определить, перейдем ли мы к такой технологии в будущем.

Чтобы определить это, я решил имитировать основной интерфейс одного из наших существующих приложений, созданных с помощью компиляторов Embarcadero RAD Studio. Это приложение в основном состоит из 4 отдельных частей, а именно:

Теперь я хочу добавить разделители между каждой частью, таким образом, они могут быть изменены, независимо от других. Например, я хочу, чтобы верхний разделитель изменил размеры левой верхней и правой верхней панелей, но без изменения размера левой нижней и правой нижней.

Для создания вышеуказанного интерфейса я написал следующее содержимое xaml:

<Window x:Class="WPFApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPFApp"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Grid Margin="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="53*"/>
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left Top</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2">Left Bottom</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2">Right Top</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2" Grid.Row="2">Right Bottom</TextBlock>
        <GridSplitter x:Name="MainHorzSplitterTop" HorizontalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <GridSplitter x:Name="MainHorzSplitterBottom" HorizontalAlignment="Stretch" Width="5" Grid.Column="1" Grid.Row="2"/>
        <GridSplitter x:Name="MainVertSplitterLeft" HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
        <GridSplitter x:Name="MainVertSplitterRight" HorizontalAlignment="Stretch" Height="5" Grid.Row="1" Grid.Column="2"/>
    </Grid>
</Window>

Однако, когда я двигаюсь, например, верхний разделитель, нижний разделитель перемещается вместе, а нижняя часть изменяется. Как я могу изменить свой код, чтобы получить поведение, которое я хочу?

Answer 1

Вы можете сделать это, имея сетку внутри сетки.Итак, ваша первая сетка состоит только из трех рядов.Первый будет содержать сетку с тремя столбцами для ваших двух текстовых блоков и гридсплиттер.Второй ряд будет разделителем для изменения размера ваших двух строк.Третий будет содержать другую сетку с той же настройкой, что и для первой строки.

Это будет выглядеть так:

<Window x:Class="Splitted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SplitterProject"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid Margin="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="30*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="53*"/>
    </Grid.RowDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <TextBlock>Top left</TextBlock>
        <GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <TextBlock Grid.Column="2">Top right</TextBlock>
    </Grid>
    <GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <TextBlock>Bottom left</TextBlock>
        <GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <TextBlock Grid.Column="2">Bottom right</TextBlock>
    </Grid>
</Grid>

Затем вы можете изменить размер верхней части инижний ряд независимо:

Answer 2

<Window x:Class="SAMPLE.Panels.GridSplitterSample"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />

<ColumnDefinition Width="5" />
   `<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
 <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" 
TextWrapping="Wrap">Left side</TextBlock>
 <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" 
        VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>


  </Grid>
</Window>