TabItemのMahapps Metroバッジがクリップされています

Question

MetroTabItemのヘッダーのコンテンツの周りにバッジを配置しようとすると、ヘッダーの境界でバッジがクリップされます。私はテンプレートが無駄

にこれを引き起こして任意の明白な性質を持っているかどうかを確認するためにスヌープを使用してみました

ここで私ができる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上記のいずれかの他のコントロールがある場合、問題は

ままチェックしました境界線を示すために半透明の背景を持つ画像。

EDIT：

ここMetroTabItemからヘッダ内容（スヌープから収集）ビジュアルツリーです。 PART_BadgeContainerはバッジ自体の境界線です。上の境界線は「スクリプト」コンテナです。

EDIT 2：私は（2017対）デフォルトWPFのテンプレートを作成しましたので、

MM8は、完全な例を求め、現在の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> 

012ここ

は結果です：

Answer 1

あなたはBadged要素のためのマージンを指定することができます。緑色のバッジは、タブ項目のヘッダーを重複していない第2の画像では、明確にするために

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