在XAML（WPF）中使用GridSplitter和GridRowsColumns定义的尺寸问题。

Question

我目前正在用C#语言用WPF制作一个游戏引擎编辑器，我决定使用GridSplitter组件以及包含列和行定义的网格。我决定使用GridSplitter组件以及包含列和行定义的网格。我有两个网格，一个是顶部的列定义（0），一个是底部的列定义（1）。在顶部网格中，我有一些行定义，用于放置3个标签控件和2个网格分割器。我在第二行中没有任何网格分割器或行定义，只有另一个标签控件，以便它可以缩放到相同的屏幕宽度。

我的问题是这样的。每当我使用左边的网格分割器来调整顶部网格中左边标签控件的大小时，就会发生这样的情况：如果我尝试使用网格分割器来缩放右边的标签控件，也会发生同样的事情。这是我的代码。

<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

发生这种情况是因为3个ColumnDefinitions和3个GridSplitter组件。Width="*" 将一直有相同的宽度（这就是*的意思，当一个宽度改变时，所有其他的宽度也会改变）。您使用2个 Width="3" GridSplitters的ColumnDefinitions。当你移动分割器时，其中一个TabControl的宽度减小，会导致其他TabControls收缩，而这两个未使用的ColumnDefinitions会填满剩余的空间(Width="3" 在这种情况下被重写）。)

删除那些未使用的ColumnDefinitions，并调整了 Grid.Column 的GridSplitters和TabControls。

<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作为margin工作。不要这样做，在TabControls上设置一些margin来代替。