使用 GridSplitter 和 GridRows/Columns 定義的 XAML (WPF) 中的大小問題

Question

我目前正在 C# 中使用 WPF 制作游戲引擎編輯器。 我決定將 GridSplitter 組件與包含列和行定義的網格一起使用。 我有兩個網格，一個用於頂部列定義 (0)，一個用於底部列定義 (1)。 在頂部網格中，我有一些用於放置 3 個選項卡控件和 2 個網格拆分器的行定義。第二行中沒有任何網格拆分器或行定義，只有另一個選項卡控件，以便它可以縮放到同一個屏幕寬度。

這是我的問題：每當我 go 使用左網格拆分器來調整頂部網格中左選項卡控件的大小時，如果我嘗試使用網格拆分器縮放右選項卡控件，也會發生同樣的事情這是我的代碼：

<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 將始終具有相同的寬度（這就是 * 的含義，當一個的寬度改變時，其他所有的也會改變）。 您為 GridSplitters 使用 2 個Width="3" ColumnDefinitions。 當您移動拆分器時，TabControl 的 1 個寬度會減小，這會導致其他 TabControls 收縮，而這 2 個未使用的 ColumnDefinitions 會填滿剩余空間（在這種情況下會覆蓋Width="3" ）。

刪除那些未使用的 ColumnDefinitions 並相應地調整Grid.Column和 TabControls 的 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 上設置一些邊距。