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>

但是，只要Background的{{1}}设置为TabItem，我就可以从其他控件获取徽章以重叠标题。

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

这是一个带有半透明背景的图像来显示边界。

编辑：

这是从TabItem到标题内容的可视树（从Snoop收集）。 PART_BadgeContainer是徽章本身的边框，上面的边框是'脚本'容器。

编辑2：

mm8要求提供一个完整的示例，所以我创建了一个默认的WPF模板（vs 2017），添加了当前Mahapp.Metro和MahApp.Metro.IconPacks NuGet包的引用，并设置了MainWindow.xaml：< / p>

MetroTabItem

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

结果如下：

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徽章被剪裁

1 个答案: