TabItem 中的 Mahapps Metro Badge 被剪裁

Question

如果我尝试在 MetroTabItem 的 header 的内容周围放置徽章，徽章会被 header.

的边界剪掉

我已经尝试使用 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，我就可以从不同的控件获取徽章以与 header 重叠。

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

这是一张带有一些半透明背景以显示边界的图像。

编辑：

这是从 MetroTabItem 到 header 内容的可视化树（从 Snoop 收集）。 PART_BadgeContainer 是徽章本身的边框，上面的边框是 'Scripts' 容器。

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

TabItem 中的 Mahapps Metro Badge 被剪裁

Mahapps Metro Badge in TabItem being clipped

c#

wpf

mahapps.metro