TabItem中的Mahapps Metro Badge被裁剪

Question

如果我尝试在MetroTabItem标题的内容周围放置徽章，则徽章会被标题的边界剪裁。

我已经尝试过使用Snoop来查看模板是否具有导致此问题的明显属性，但无济于事

这是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>

但是，只要TabItem的Background设置为Transparent ，我就可以从其他控件获取徽章以使其与标题重叠。

我检查了TabItem上方是否还有其他控件，这些控件没有透明边框，但是即使有任何可能与该区域重叠的控件都设置为透明，问题仍然存在

这是带有一些半透明背景的图像，用于显示边界。

编辑：

这是从MetroTabItem到标题内容的可视树（从Snoop收集）。 PART_BadgeContainer是徽章本身的边界，上方的边界是“脚本”容器。

编辑2：

mm8要求提供完整的示例，因此我创建了默认的WPF模板（与2017年相比），为当前的Mahapp.Metro和MahApp.Metro.IconPacks NuGet包添加了引用，并按如下方式设置MainWindow.xaml：

<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>

结果如下：

Answer 1

您可以为Badged元素指定边距：

<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>
    ...