Fun with TipBubble. Styling TabControl

Fun with TipBubble. Styling TabControl

July 22, 2010

I was thinking of some fun ways to use the TipBubble control, aside from the obvious. Here’s an idea, how about using TipBubble to style TabControl?

TabStyle

Achieving the result you see on the image above is quite simple. Just make a copy of the default TabItem style and replace the TemplateTopSelected grid with the code below.

    <Grid x:Name="TemplateTopSelected" Canvas.ZIndex="1" Visibility="Collapsed">
        <tip:TipBubble
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="1,1,1,0"
            CornerRadius="3,3,0,0"
            TipPosition="0.5"
            TipSide="Bottom"
            TipFill="#FcD400"
            TipSize="10"
            Margin="0 0 0 -8">
            <tip:TipBubble.Background>
                <LinearGradientBrush
                    EndPoint="0,0" StartPoint="0,1"
                    ColorInterpolationMode="ScRgbLinearInterpolation">
                    <GradientStopCollection>
                        <GradientStop Color="#FFE97F" Offset="1" />
                        <GradientStop Color="#FcD400" Offset="0" />
                    </GradientStopCollection>
                </LinearGradientBrush>
            </tip:TipBubble.Background>
            <ContentControl
                Cursor="{TemplateBinding Cursor}"
                Height="Auto" Width="Auto"
                x:Name="HeaderTopSelected"
                FontSize="{TemplateBinding FontSize}"
                FontWeight="Bold"
                Foreground="#333" IsTabStop="False"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Margin="6,4,6,4"/>
        </tip:TipBubble>
    </Grid>

Repeat this operation for TemplateBottomSelected, TemplateLeftSelected, and TemplateRightSelected to get the complete style. Remember to modify TipSide, Margin BorderThickness and CornerRadius to correspond with each template (i.e. tab on the bottom, tip on the top; tab on the left, tip on the right etc.)