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到页眉内容的可视化树（从史努比收集）。 PART_BadgeContainer是徽章本身的边框，上面的边框是'脚本'容器。

编辑2：

MM8要求一个完整的例子，所以我已经创建了一个默认的WPF模板（VS 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> 
    ...