Question

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

alt text

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

但是...

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

我可以很容易地将这个控件分成两行网格，一个用于标题，另一个用于内容，顶部有一个非常圆的角落，但我无法在那里获得那些“倒置”圆角标题的底部，我会吗？

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

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

提前致谢

Answer 1

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

Answer 2

我使用Andrei提交的路径选项想出来了。

对于那些感兴趣的人，这里是最终模板（使用cornerRadius为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属性中的底角。

在WPF模板中屏蔽（opacitymask颠倒）

3 个答案: