masking in WPF template (opacitymask reversed)

Question

I am currently redoing a groupBox's template. I would like the header to have rounded corner on top and "inverted" rounded corner at the bottom:

I managed the above template quite easily by rounding the top corners of the content part and putting the content on top of a "background" container having the darkest color as background.

BUT...

my specifications require that the content's background (lightgray on the picture) might be transparent (i.e.: it should be possible to see right through the content part without having to loose the header's background color). And this is where I'm stuck...

I could easily split this control into two rows of a grid, one for the header, the other for the content and have pretty rounded corner at the top, but I would not be able to get those "inverted" rounded corner at the header's bottom, would I?

so I would be really glad if somebody could either:

• point me to a solution (involving whatever dirty trick)
• confirm that what I want to do is impossible

thanks in advance

Answer 1

I figured it out, using the path option submitted by Andrei.

for those interested, here is the final template (using a cornerRadius of 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

You could use a Path to obtain what you want, a Path that describes the whole dark gray area of your header. You can look at the examples here and figure out the data for your Path.

Answer 3

Perhaps that top area contains two borders?

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

Your lower area would have something similar in a Border with just the bottom corners in the CornerRadius property.