使用 GridSplitter 和 GridRows/Columns 定义在 XAML (WPF) 中调整大小问题

Question

我目前正在使用 C# 中的 WPF 制作游戏引擎编辑器。我决定将 GridSplitter 组件与包含列和行定义的网格一起使用。我有两个网格，一个用于顶部列定义 (0)，一个用于底部列定义 (1)。在顶部网格中，我有一些用于放置 3 个选项卡控件和 2 个网格分隔符的行定义。我在第二行中没有任何网格分隔符或行定义，只有另一个选项卡控件，以便它可以缩放到同一屏幕宽度。

这是我的问题： Whenever I go to use the left grid splitter to resize the left tab control in the top grid, this happens Same thing happens if I try and scale the right tab control with the grid splitter 这是我的代码：

<Window x:Class="Editor.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:Editor"
    mc:Ignorable="d"
    Title="Frostplay Engine 2020.1.0 - Level.frost - Project" Height="720" Width="1280" Background="#FF1E1E1E">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="3" />
        <RowDefinition Height="250" />
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3" /> 
            <ColumnDefinition Width="3" /> <!-- 2: First Grid Splitter -->
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3" /> <!-- 4: Second Grid Splitter -->
            <ColumnDefinition Width="3" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TabControl x:Name="TopLControl" Background="{x:Null}" BorderThickness="0">
            <TabItem Header="Hierarchy" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
        </TabControl>
        <GridSplitter Grid.Column="2" Width="3" HorizontalAlignment="Stretch" Background="#FF282828" />
        <TabControl x:Name="TopCControl" Grid.Column="3" Background="{x:Null}" BorderThickness="0">
            <TabItem Header="Scene" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
            <TabItem Header="Game" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
        </TabControl>
        <GridSplitter Grid.Column="4" Width="3" HorizontalAlignment="Stretch" Background="#FF282828" />
        <TabControl x:Name="TopRightControl" Grid.Column="6" Background="{x:Null}" BorderThickness="0">
            <TabItem Header="Inspector" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
        </TabControl>
    </Grid>
    <GridSplitter Grid.Row="1" Height="3" HorizontalAlignment="Stretch" Background="#FF282828" />
    <Grid Grid.Row="2">
        <TabControl x:Name="BottomControl" Background="{x:Null}" BorderThickness="0">
            <TabItem Header="Project" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
            <TabItem Header="Console" Style="{StaticResource CustomTabControl}" Foreground="White" FontSize="14">
                <Grid Background="#FF3C3C3C"/>
            </TabItem>
        </TabControl>
    </Grid>
</Grid>

有谁知道我该如何修复它，以便当我向左拖动左侧的网格拆分器时，中间的选项卡控件也向左缩放，而当我将右侧的网格拆分器向右移动时，中间的选项卡控件也向左缩放选项卡控件向右缩放？

感谢阅读！ :)

Answer 1

这是因为 Width="*" 的 3 个 ColumnDefinitions 将始终具有相同的宽度（这就是 * 的含义，当一个宽度改变时，所有其他的也会改变）。您使用 2 个 Width="3" ColumnDefinitions 作为 GridSplitter。当您移动拆分器时，TabControl 的 1 个宽度会减小，这会导致其他 TabControl 收缩并且那些 2 个未使用的 ColumnDefinitions 会填满剩余的 space（Width="3" 在这种情况下被覆盖）。

删除那些未使用的 ColumnDefinitions 并相应地调整 GridSplitter 和 TabControl 的 Grid.Column。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <!-- remove this one <ColumnDefinition Width="3" /> -->
    <ColumnDefinition Width="3" /> <!-- 2: First Grid Splitter -->
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="3" /> <!-- 4: Second Grid Splitter -->
    <!-- and this one <ColumnDefinition Width="3" /> -->
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

我猜您希望那些未使用的 ColumnDefinitions 用作边距。不要这样做，而是在 TabControls 上设置一些边距。