Mahapps Metro Badge in TabItem being clipped

Question

If I try to place a badge around the content of a MetroTabItem 's header the badge gets clipped by the bounds of the header.

I've tried using Snoop to see if the template has any obvious properties causing this but to no avail

Here's the code for the MetroTabItem

<metro:MetroTabItem>
    <TabItem.Header>
        <metro:Badged BadgePlacementMode="TopRight" BadgeBackground="Transparent">
            <metro:Badged.Badge>
                <iconPacks:PackIconMaterial Kind="AlertCircleOutline" Foreground="{DynamicResource ValidationBrush5}"/>
            </metro:Badged.Badge>
            <TextBlock Text="Scripts"
                       Padding="0"
                       Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}, Path=(TextElement.Foreground)}"
                       FontSize="{Binding RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}, Path=(TextElement.FontSize)}"
                       />
        </metro:Badged>
    </TabItem.Header>
</metro:MetroTabItem>

I can, however, get the badge from a different control to overlap the header so long as the Background of the TabItem is set to Transparent .

I've checked if there are any other controls above the TabItem that don't have a transparent border but even with anything that could overlap this area set to transparent the problem remains

Here's an image with some translucent backgrounds to show bounds.

EDIT:

Here's the visual tree (gathered from Snoop) from the MetroTabItem to the header contents. PART_BadgeContainer is the border for the Badge itself, the Border above is the 'Scripts' Container.

EDIT 2:

mm8 asked for a complete example so I've created a default WPF template (vs 2017), added a reference the the current Mahapp.Metro and MahApp.Metro.IconPacks NuGet packages and set up MainWindow.xaml as such:

<metro:MetroWindow x:Class="TabItemBadgeLayout.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:metro="http://metro.mahapps.com/winfx/xaml/controls"    
    xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0 10 0 0">
        <metro:MetroAnimatedTabControl>
            <metro:MetroTabItem>
                <TabItem.Header>
                    <metro:Badged BadgePlacementMode="TopRight" BadgeBackground="Transparent">
                        <metro:Badged.Badge>
                            <iconPacks:PackIconMaterial Kind="AlertCircleOutline" Foreground="{DynamicResource ValidationBrush5}"/>
                        </metro:Badged.Badge>
                        <TextBlock Text="Scripts"
                           Padding="0"
                           Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.Foreground)}"
                           FontSize="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.FontSize)}"
                           />
                    </metro:Badged>
                </TabItem.Header>
            </metro:MetroTabItem>
            <metro:MetroTabItem>
                <TabItem.Header>
                    <metro:Badged BadgePlacementMode="TopRight" BadgeBackground="Transparent">
                        <metro:Badged.Badge>
                            <iconPacks:PackIconMaterial Kind="AlertCircleOutline" Foreground="{DynamicResource ValidationBrush5}"/>
                        </metro:Badged.Badge>
                        <TextBlock Text="Tasks"
                           Padding="0"
                           Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.Foreground)}"
                           FontSize="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.FontSize)}"
                           />
                    </metro:Badged>
                </TabItem.Header>
            </metro:MetroTabItem>
        </metro:MetroAnimatedTabControl>
    </Grid>
</metro:MetroWindow>

App.xaml:

<Application x:Class="TabItemBadgeLayout.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:TabItemBadgeLayout"
         StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Here's the result:

Answer 1

You could specify a margin for the Badged elements:

<metro:MetroTabControl>
    <metro:MetroTabControl.Resources>
        <Style TargetType="metro:Badged" BasedOn="{StaticResource {x:Type metro:Badged}}">
            <Setter Property="Margin" Value="0 10 2 0" />
        </Style>
    </metro:MetroTabControl.Resources>
    <metro:MetroTabItem>
        <TabItem.Header>
            <metro:Badged BadgePlacementMode="TopRight" BadgeBackground="Transparent">
                <metro:Badged.Badge>
                    <iconPacks:PackIconMaterial Kind="AlertCircleOutline" Foreground="{DynamicResource ValidationBrush5}"/>
                </metro:Badged.Badge>
                <TextBlock Text="Scripts"
                           Padding="0"
                           Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.Foreground)}"
                           FontSize="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type metro:ContentControlEx}}, Path=(TextElement.FontSize)}"
                           />
            </metro:Badged>
        </TabItem.Header>
    </metro:MetroTabItem>
    ...