Custom shaped Border in WPF

Question

I am trying to create a TabControl which matches the style of an existing tab control I use in WinForms, and one of the features of that is that it has tab button shapes like those found in VS (slant on the left, other edges square).

I am just starting out in WPF, so maybe I'm barking up the wrong tree, but I figured I needed to get a Border, and attach it to a Path, so that I could specify some geometry for the border... However, I just can't find any useful information. I found a 'FreeFormContentControl' class on S/O, but that is for masking content to a specific shape, rather than drawing a border around it in a specific shape.

If somebody could point me in the right direction I'd be very much obliged!

Answer 1

You can specify Border's properties BorderThickness and CornerRadius in terms of individual value for each side, for example:

<Border CornerRadius="2,2,0,0" BorderThickness="2,2,2,0"/>

It will have topLeft and topRight corners radius set to 2 and left, top and right border parts set to 2.

UPDATE:

Also you can create your custom Adorner. More info provided by this MSDN Article

And simply add some self sized geometry to TabItem control template. More info on it provided this MSDN Article

SAMPLE

<Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Viewbox Width="{TemplateBinding Width}"  Height="{TemplateBinding Height}" Stretch="Fill" StretchDirection="DownOnly">
                                <Path x:Name="path" Stretch="Fill" Stroke="Black" Fill="{StaticResource LightBrush}" Width="Auto" Height="Auto" Data="M 0,20 L 0,5 5,0 100,0 100,20 "/>
                            </Viewbox>

                            <Border Visibility="Visible"
            x:Name="Border"                                                                  
            Margin="5,1,0,1" >
                                <ContentPresenter x:Name="ContentSite"
              VerticalAlignment="Center"
              HorizontalAlignment="Center"
              ContentSource="Header"
              Margin="12,2,12,2"
              RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="path" Property="Fill" Value="{StaticResource WindowBackgroundBrush}" />

                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="path" Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" />
                                <Setter TargetName="path" Property="Stroke" Value="{StaticResource DisabledBorderBrush}" />
                                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

"How to create trapezoid tabs in WPF control" link text might be helpful.