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:
thanks in advance
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>