C#-如何在同一列和/或行上创建具有独立拆分器的WPF接口？

我对VisualStudio2019 WPF界面完全是新手，但我需要为我的工作创建一个演示项目，以确定我们将来是否会迁移到这样的技术

为了确定这一点，我决定模拟一个现有应用程序的主界面，该应用程序是使用Embarcadero RAD Studio编译器创建的。此应用程序主要分为4个不同的部分，如下所示：

现在我想在每个部分之间添加拆分器，以这样的方式，它们可以调整大小，独立于其他部分。例如，我希望顶部拆分器调整左顶部和右顶部面板的大小，但不调整左底部和右底部面板的大小

为了创建上述接口，我编写了以下xaml内容：

左上角
左下角
右上方
右下角

但是，当我移动（例如，顶部拆分器）时，底部拆分器一起移动，底部部分的大小也随之调整。如何修改代码以获得所需的行为？

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

`
左侧
右侧

`
左侧
右侧

您可以通过在网格中放置网格来实现这一点。 因此，第一个网格仅由三行组成。第一个将包含一个网格，其中有三列用于两个TextBlock和一个gridsplitter。第二行是调整两行大小的拆分器。第三行将包含另一个网格，其设置与第一行相同

它看起来是这样的：

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

左上角
右上角
左下角
右下角

然后，可以独立调整顶行和底行的大小：

---

您可以通过在网格中放置网格来实现这一点。 因此，第一个网格仅由三行组成。第一个将包含一个网格，其中有三列用于两个TextBlock和一个gridsplitter。第二行是调整两行大小的拆分器。第三行将包含另一个网格，其设置与第一行相同

它看起来是这样的：

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

左上角
右上角
左下角
右下角

然后，可以独立调整顶行和底行的大小：

---

在主网格内分离网格，顶部和底部是各自的网格，带有垂直拆分器。您尚未指定是否也希望能够独立移动水平拆分器的每一半，以便只调整左上+左下或右上+右下的大小。如果你想做到这一点，我认为不可能用纯XAML——你可能实际上需要创建额外的分离器来表示中间的命令部分，并在魔法后面做一些代码，以确保片段在其他分裂器被移动时被调整大小/隐藏。垂直拆分器。您尚未指定是否还希望能够独立移动水平拆分器的每一半，以便只调整左上+左下或右上+右下的大小。如果你想做到这一点，我不认为这是可能的纯XAML -你可能实际上需要创建额外的分裂器，以代表在中东的命令部分，并做一些魔法背后的代码，以确保片段调整大小/隐藏其他分裂者移动。