时间戳

首页 > 解决方案 > XAML (WPF) 中使用 GridSplitter 和 GridRows/Columns 定义的大小问题

c# - XAML (WPF) 中使用 GridSplitter 和 GridRows/Columns 定义的大小问题

问题描述

我目前正在用 C# 中的 WPF 制作游戏引擎编辑器。我决定将 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>

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

感谢您的阅读！:)

标签： c#wpfvisual-studioxamlgame-engine

解决方案

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

删除那些未使用Grid.Column的 ColumnDefinitions 并相应地调整 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 用作边距。不要这样做，而是在 TabControls 上设置一些边距。

推荐阅读