How to align the first TabItem with the left border of its TabControl?

Question

I'm working on a custom TabControl for my C#-WPF-application. Basically, everything I want works just fine. Except for one litte thing that really annoys me: The first TabItem of the TabControl is indentet 2 pixels and therefore won't align with the left border of the TabControl. Unfortunately I can't yet post pictures, so I hope you guys get what I mean... So, is there any possibility to get the first TabItem aligned with its TabControl? Maybe by somehow setting its position?

Here's the entire XAML-code:

<UserControl x:Class="DocumentationOfXmlInterfaces.CentralTabControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<TabControl
    Name="MyTabcontrol"
    BorderBrush="Navy"
    BorderThickness="2"
    ItemsSource="{Binding}"
    SelectionChanged="MyTabcontrol_SelectionChanged"
>
    <TabControl.Resources>

        <Style TargetType="TabPanel">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>

        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            ClipToBounds="True"
                        >
                            <Border
                                x:Name="MyBorder"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                BorderBrush="Navy"
                                BorderThickness="1"
                            >
                                <DockPanel
                                    Name="MyDockpanel_Content"
                                >
                                    <ContentPresenter
                                        x:Name="MyContentPresenter"
                                        HorizontalAlignment="Center"
                                        Content="{TemplateBinding Content}"
                                    />
                                </DockPanel>
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <DataTrigger
                                Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
                                Value="False"
                            >
                                <Setter 
                                    TargetName="MyBorder"
                                    Property="Border.BorderBrush"
                                    Value="RoyalBlue"
                                />
                            </DataTrigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter
                                    TargetName="MyBorder"
                                    Property="Border.BorderBrush"
                                    Value="White"
                                />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="TabHeader" DataType="TabItem">
            <DockPanel>
                <Button
                    Name="MyButton_CloseTab"
                    DockPanel.Dock="Right" 
                    Margin="10,1,1,0"
                    Click="MyButton_Click"
                    CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
                >
                    <Image Name="MyImage_Button" Source="Icons/Close.png" Height="12" Width="12"/>
                </Button>
                <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}"/>
            </DockPanel>
            <DataTemplate.Triggers>
                <DataTrigger
                    Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
                    Value="False"
                >
                    <Setter
                        TargetName="MyButton_CloseTab"
                        Property="Visibility"
                        Value="Hidden"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Source"
                        Value="Icons/Close2.png"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Height"
                        Value="12"
                    />
                    <Setter
                        TargetName="MyImage_Button"
                        Property="Width"
                        Value="12"
                    />
                </DataTrigger>
                <DataTrigger
                    Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsMouseOver}"
                    Value="True"
                >
                    <Setter
                        TargetName="MyButton_CloseTab"
                        Property="Visibility"
                        Value="Visible"
                    />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border 
                            x:Name="MyBorder"
                            BorderBrush="Navy" 
                            BorderThickness="1,1,1,0"
                        >
                            <Grid Name="Panel">
                                <ContentPresenter 
                                    x:Name="ContentSite"

                                    ContentSource="Header"
                                    Margin="5,0,0,0"
                                />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Panel" Property="Background" Value="Navy"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="Panel" Property="Background" Value="RoyalBlue"/>
                                <Setter TargetName="MyBorder" Property="BorderBrush" Value="RoyalBlue"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="MyBorder" Property="BorderBrush" Value="Navy"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Grid">
            <Setter Property="VerticalAlignment" Value="Stretch"></Setter>
            <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

I'd really appreciate your help! Thanks! :)

Answer 1

In the same mindset as this answer (Change GroupBox Header location), you could have a negative left margin on your tab item. Like this: Margin="-2,0,0,0"

Answer 2

Your problem here is that the headers TabPanel inside the TabControl template has its Margin set explicitly, and your Style won't be able to override it.

You may need to modify the whole TabControl's Template to change the value of that Margin.

So maybe it'd be easier to just do the negative margin trick :P