How to remove the gap between the tab header and tab content in TabControl?

[jtchen90]

Hi, I'm a new user to AvaloniaUI. I defined the a style as the following code. I find there exists a gap between the tab header and the tab content. I have googled the question, there is no related answers.

<Window.Styles>
    <Style Selector="TabControl">
        <Setter Property="Template">
            <ControlTemplate>
                <DockPanel>
                    <ItemsPresenter Name="PART_ItemsPresenter" DockPanel.Dock="Top" ItemsPanel="{TemplateBinding ItemsPanel}"/>
                    <ContentPresenter Name="PART_SelectedContentHost" Content="{TemplateBinding SelectedContent}" Background="#FFFFFF" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
                </DockPanel>
            </ControlTemplate>
        </Setter>
    </Style>
    <Style Selector="TabItem:selected /template/ Border#PART_SelectedPipe">
        <Setter Property="IsVisible" Value="False" />
    </Style>
    <Style Selector="TabItem:pointerover /template/ Border#PART_LayoutRoot">
        <Setter Property="Background" Value="Gray"/>
    </Style>
    <Style Selector="TabItem:selected">
        <Setter Property="Background" Value="#FFFFFF"/>
    </Style>
    <Style Selector="TabItem">
        <Setter Property="Background" Value="#BCBCBC" />
        <Setter Property="CornerRadius" Value="2,2,0,0" />
        <Setter Property="MinHeight" Value="25" />
        <Setter Property="FontSize" Value="13"/>
    </Style>
</Window.Styles>

<Grid Background="#E4E4E4">
    <TabControl>
        <TabItem Header="Tab 1">
            <TextBlock Text="Content for Tab 1"/>
        </TabItem>
        <TabItem Header="Tab 2">
            <TextBlock Text="Content for Tab 2"/>
        </TabItem>
    </TabControl>
</Grid>

[LaurentInSeattle]

Looks like there is a padding or a margin that you should probably set to zero.
Inspecting the Visual Tree with DevTool (F12) will tell.

[jtchen90]

Thanks for your answer