C# - 如何在同一列 and/or 行上创建具有独立拆分器的 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="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>

Answer 2

您可以通过在网格中设置网格来做到这一点。所以你的第一个网格只包含三行。第一个将包含一个网格，其中包含用于两个文本块的三列和一个网格拆分器。第二行将是调整两行大小的拆分器。第三个将包含另一个网格，其设置与第一行相同。

看起来像这样：

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

然后您可以分别调整顶行和底行的大小：

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

C# - How to create a WPF interface with independent splitters on the same column and/or row?

c#

.net

wpf

splitter