маскировка в шаблоне WPF (непрозрачность маски обратная)

Question

Я в настоящее время переделываю шаблон groupBox. Я бы хотел, чтобы заголовок имел закругленный угол сверху и «перевернутый» закругленный угол внизу:

Я довольно легко справился с приведенным выше шаблоном, округлив верхние углы части содержимого и поместив содержимое поверх контейнера "background", имеющего самый темный цвет в качестве фона.

НО ...

мои спецификации требуют, чтобы фон содержимого (светло-серый на изображении) мог быть прозрачным (то есть: должна быть возможность видеть сквозь часть содержимого без потери цвета фона заголовка). И вот где я застрял ...

Я мог бы легко разделить этот элемент управления на две строки сетки, одну для заголовка, другую для содержимого и иметь довольно закругленный угол вверху, но я бы не смог получить этот «перевернутый» закругленный угол в нижняя часть заголовка, я бы?

поэтому я был бы очень рад, если бы кто-нибудь мог:

• укажи мне на решение (включающее любой подвох)
• подтвердите, что то, что я хочу сделать, невозможно

заранее спасибо

Answer 1

Я понял это, используя опцию пути, предоставленную Андреем.

для тех, кто заинтересован, вот окончательный шаблон (с использованием углового радиуса 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 2

Вы можете использовать Путь, чтобы получить то, что вы хотите, Путь, который описывает всю темно-серую область вашего заголовка. Вы можете посмотреть примеры здесь и выяснить данные для вашего пути.

Answer 3

Возможно, эта верхняя область содержит две границы?

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

Ваша нижняя область будет иметь нечто похожее на Border с только нижними углами в свойстве CornerRadius.