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