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! :)

score 0 · Accepted Answer · answered Apr 23 '20 at 20:21

0

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.

answered Apr 23 '20 at 20:21

Adam Štafa

353
1
13

It works now! Thank you so very much for your help! :) – ElxtePrxgrxmmxr Apr 23 '20 at 21:06
Also, if I do it this way instead, how can I make the scene tab control's width bigger without having that same problem again – ElxtePrxgrxmmxr Apr 23 '20 at 21:11
You can set Width="2*" for the respective ColumnDefinition. Columns with asterisk as unit of width will fill-up the remaining space in the given ratio (in this case 1:2:1). You can put any number before the asterisk to change the ratio. You can read more about Width of ColumnDefinitions in WPF in this [answer](https://stackoverflow.com/a/6956942/11755813). – Adam Štafa Apr 23 '20 at 21:33
By the way, welcome to StackOverflow! If I answered your question, would you please consider accepting the answer by clicking the checkmark? If you do so, you let the community know, that your problem has been solved. Also you can upvote/downvote any question, answer, or comment if you think they're helpful/unhelpful. – Adam Štafa Apr 23 '20 at 21:59
Got it, thank you man! :) Thank you for welcoming me and of course! :) – ElxtePrxgrxmmxr Apr 23 '20 at 22:04
Thanks. Keep up the good post quality. Your problem was easy to understand and the screenshots were very helpful. – Adam Štafa Apr 23 '20 at 22:14

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

1 Answers1