Sizing Problems in XAML (WPF) with GridSplitter and GridRows/Columns Definitions

Question

I am currently making a game engine editor with WPF in C#. I have decided to use GridSplitter components along with grids that contain column and row definitions. I have two grids, one for the top column definition (0) and one for the bottom column definition (1). In the top grid, I have some row definitions for placing 3 tab controls and 2 grid splitters in. I don't have any grid splitters or row definitions in the second row, only another tab control so that it can scale to the same screen width.

Here's my problem: 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 Here is my code:

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

Does anybody know how I can fix it so that when I drag the left grid splitter to the left, the middle tab control scales to the left too, and when I move the right grid splitter to the right, the middle tab control scales to the right?

Thank you for reading! :)

Adam Štafa Adam Štafa · Accepted Answer · 2020-04-23T20:21:16

This happens because the 3 ColumnDefinitions with Width="*" will have the same width all the time (that's the meaning of *, when width of one changes, all the others change too). You use 2 of Width="3" ColumnDefinitions for the GridSplitters. When you move the splitter, 1 of TabControl's width decreases, that causes the other TabControls to contract and those 2 unused ColumnDefinitions fill up the remaining space (Width="3" is overridden in this case).

Remove those unused ColumnDefinitions and adjust Grid.Column of the GridSplitters and TabControls accordingly.

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

I guess you wanted those unused ColumnDefinitions to work as margin. Don't do this, set some margin on the TabControls instead.

Sizing Problems in XAML (WPF) with GridSplitter and GridRows/Columns Definitions

1 Answers