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