wpf - WPF 模板中的遮罩（不透明遮罩反转）

Question

我目前正在重做一个 groupBox 的模板。我希望标题顶部有圆角，底部有“倒”圆角：

我通过将内容部分的顶角四舍五入并将内容放在具有最暗颜色作为背景的“背景”容器的顶部来非常轻松地管理上述模板。

但...

我的规范要求内容的背景（图片上的浅灰色）可能是透明的（即：应该可以直接看穿内容部分，而不必松开标题的背景颜色）。这就是我被困的地方......

我可以轻松地将这个控件分成两行网格，一排用于标题，另一排用于内容，顶部有漂亮的圆角，但我无法在标题底部获得那些“倒置”圆角， 我可以吗？

所以如果有人可以，我会很高兴：

• 给我指出一个解决方案（涉及任何肮脏的把戏）
• 确认我想做的事情是不可能的

提前致谢

Answer 1

您可以使用 Path 来获取所需的内容，即描述标题的整个深灰色区域的 Path。您可以查看此处的示例并找出您的路径的数据。

Answer 2

我想通了，使用 Andrei 提交的路径选项。

对于那些感兴趣的人，这是最终的模板（使用 3 的角半径）：

<Border x:Name="Border"
        CornerRadius="3"
        Background="{TemplateBinding local:MyGroupBox.ContentBackground}"
        BorderThickness="{TemplateBinding BorderThickness}"
        BorderBrush="{TemplateBinding BorderBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="3" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="3"/>
        </Grid.ColumnDefinitions>
        <Border x:Name="HeaderBorder"
                Grid.Row="0"
                Grid.ColumnSpan="3"
                CornerRadius="3,3,0,0"
                Background="{TemplateBinding Background}" />
        <ContentPresenter Grid.Row="0"
                            Grid.ColumnSpan="3"
                            Margin="6"
                            ContentSource="Header"
                            RecognizesAccessKey="True"
                            HorizontalAlignment="Center"/>
        <Path x:Name="LeftCorner"
                Grid.Row="1"
                Grid.Column="0"
                Stretch="Fill"
                Data="M0,0 L3,0 C1.3431457,0 0,1.3431457 0,3 L0,0 z"
                Fill="{TemplateBinding Background}"/>
        <Path x:Name="RightCorner"
                Grid.Row="1"
                Grid.Column="2"
                Stretch="Fill"
                Data="M0,0 L3,0 3,3 C3,1.3431457 1.6568543,0 0,0 z"
                Fill="{TemplateBinding Background}"/>
    </Grid>
</Border>

Answer 3

也许那个顶部区域包含两个边界？

<Border Background="Gray"
        Height="{TemplateBinding CornerRadius, 
                                 Converter={StaticResource ExtractHeight}}">
    <Border Background="{TemplateBinding Background}"
            CornerRadius="{TemplateBinding CornerRadius,
                                           Converter={StaticResource UseTop}}" />
</Border>

您的下部区域将有类似的东西，只有物业Border的底角。CornerRadius