How to remove Tab Header and Stretch the TabControl so no white space is showed?

Question

I'm completely new to the WPF .NET Core , I'm trying to implement my current software from WinForms to WPF . I'm currently stuck here: I removed the TabControl Header , but I don't like that space showed in the picture.

Defining The Main Grid

<Grid.RowDefinitions>
       <RowDefinition Height="20"/>
       <RowDefinition Height="140"/>
       <RowDefinition Height="*"/>
</Grid.RowDefinitions>

SubMain Grid

<Grid Grid.Row="3">
       <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>

In WinForms I had to override the Draw method, but I'm currently looking for a solution for WPF?

PS Please if you are planning to give negative vote, explain where I did wrong.. Thank you!

For full XML code click Here

Answer 1

Welcome to WPF. Here is a style I use for TabControl when I want to control the selected tab internally without letting the user change it:

...
xmlns:cm="clr-namespace:System.ComponentModel;assembly=PresentationFramework"
...

<Style TargetType="TabControl">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="TabItem">
                <Style.Triggers>
                    <Trigger Property="cm:DesignerProperties.IsInDesignMode" Value="False">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

If you take a look at the documentation on Visibility you should note the difference between Hidden (which you are using in your code) and Collapsed (which I am using in mine). Hidden is why you are still getting empty space.

I use DesignerProperties.IsInDesignMode as a trigger so that the tabs still show up while in design mode. That way I can still click between them when designing the interface.