Customizing TabItem Style(no coding)

Wanted to take a shot at customizing the appearance of TabItem in TabControl.

TabControl itself has few issues, we dont want to go there and will foucs on styling TabItem

I have included the style I picked up from generic.xaml in the source

The Template (removed resources, VSM related stuff) looks like this

<Grid x:Name=”Root”>                  
          <Border x:Name=”TabBorder”
                  BorderBrush=”Black”
                  BorderThickness=”1″
                  CornerRadius=”2,2,0,0″
                  Background=”{TemplateBinding Background}”>
            <Border.RenderTransform>
              <TranslateTransform Y=”0″
                                  X=”0″/>
            </Border.RenderTransform>
            <Border BorderThickness=”1″
                    BorderBrush=”{StaticResource AccentBrush}”>
              <Border.Background>
                <LinearGradientBrush StartPoint=”0.7,0″
                                     EndPoint=”0.7,1″>
                  <GradientStop x:Name=”LinearBevelLightStart”
                                Color=”{StaticResource LinearBevelLightStartColor}”
                                Offset=”0″ />
                  <GradientStop x:Name=”LinearBevelLightEnd”
                                Color=”{StaticResource LinearBevelLightEndColor}”
                                Offset=”0.35″ />
                  <GradientStop x:Name=”LinearBevelDarkStart”
                                Color=”{StaticResource LinearBevelDarkStartColor}”
                                Offset=”0.35″ />
                  <GradientStop x:Name=”LinearBevelDarkEnd”
                                Color=”{StaticResource LinearBevelDarkEndColor}”
                                Offset=”1″ />
                </LinearGradientBrush>
              </Border.Background>
              <Grid>
                <Rectangle x:Name=”SelectedBackground”
                           Fill=”#FFFFFFFF”
                           Opacity=”0″
                           Margin=”0,0,0,-2″ />
                <ContentControl
                  Grid.RowSpan=”2″
                  x:Name=”Header”
                  Content=”{TemplateBinding Header}”
                  Foreground=”{TemplateBinding Foreground}”
                  FontSize=”{TemplateBinding FontSize}”
                  FontFamily=”{TemplateBinding FontFamily}”
                  HorizontalAlignment=”{TemplateBinding HorizontalAlignment}”
                  VerticalAlignment=”{TemplateBinding VerticalAlignment}”
                  Margin=”6,2,6,1″ />
              </Grid>
            </Border>
          </Border>

I wanted to make it something different (nothing exciting, just different), I ended up with this for the template

tab2 – disabled, tab4 – active(selected)

<Grid x:Name=”Root”>
  <Border CornerRadius=”8,2,0,0″
          BorderBrush=”Black”
          BorderThickness=”1,1,1,0″>
    <ContentControl Grid.RowSpan=”2″
                    x:Name=”Header”
                    Content=”{TemplateBinding Header}”
                    Foreground=”{TemplateBinding Foreground}”
                    FontSize=”{TemplateBinding FontSize}”
                    FontFamily=”{TemplateBinding FontFamily}”
                    HorizontalAlignment=”{TemplateBinding HorizontalAlignment}”
                    VerticalAlignment=”{TemplateBinding VerticalAlignment}”
                    Margin=”6,5,6,5″ />
  </Border>
  <Rectangle Height=”2″
             Margin=”8,4,4,4″
             Opacity=”0″
             x:Name=”rect1″
             VerticalAlignment=”Top”>
    <Rectangle.Fill>
      <SolidColorBrush Color=”orange”
                       x:Name=”RectangleColor”></SolidColorBrush>
    </Rectangle.Fill>
  </Rectangle>
</Grid>

Basically it just has a border, contentcontrol and rectangle.

that alone will work, but we do want some visualstates, unselected, selected, mouseover, normal, disabled
all we are going to do is make the rectangle visible, change colors, change opacity based on the states

so keeping the VisualState names same as before, I ended up with this for VSM

<vsm:VisualStateManager.VisualStateGroups>
  <vsm:VisualStateGroup x:Name=”CommonStates”>
    <vsm:VisualStateGroup.Transitions>
      <vsm:VisualTransition Duration=”0″ />
      <vsm:VisualTransition To=”MouseOver”
                            Duration=”0:0:0.1″ />
    </vsm:VisualStateGroup.Transitions>
    <vsm:VisualState x:Name=”Normal” />
    <vsm:VisualState x:Name=”MouseOver”>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName=”rect1″
                         Storyboard.TargetProperty=”Opacity”
                         To=”1″
                         Duration=”0″ />
      </Storyboard>
    </vsm:VisualState>
    <vsm:VisualState x:Name=”Disabled”>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName=”Root”
                         Storyboard.TargetProperty=”Opacity”
                         To=”0.5″
                         Duration=”0″ />
      </Storyboard>
    </vsm:VisualState>
  </vsm:VisualStateGroup>
  <vsm:VisualStateGroup x:Name=”SelectionStates”>
    <vsm:VisualState x:Name=”Unselected”>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”Root”
                                     Storyboard.TargetProperty=”(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)”
                                     BeginTime=”00:00:00″
                                     Duration=”00:00:00.0010000″>
        <SplineDoubleKeyFrame KeyTime=”00:00:00″
                              Value=”5″ />
      </DoubleAnimationUsingKeyFrames>
    </vsm:VisualState>
    <vsm:VisualState x:Name=”Selected”>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName=”rect1″
                         Storyboard.TargetProperty=”Opacity”
                         To=”1″
                         Duration=”0″ />
        <Storyboard>
          <ColorAnimation Storyboard.TargetName=”RectangleColor”
                          Storyboard.TargetProperty=”Color”
                          To=”green”
                          Duration=”0″ />
        </Storyboard>
      </Storyboard>
    </vsm:VisualState>
  </vsm:VisualStateGroup>

and used the style like this

<my:TabControl>
  <my:TabItem Style=”{StaticResource st1}”
              Header=”tab1″ >
    <TextBlock Text=”Some Content in tab1″></TextBlock>
  </my:TabItem>
  <my:TabItem Style=”{StaticResource st1}”
              IsEnabled=”False”
              Header=”tab2″>
    <TextBlock Text=”Some Content in tab2″></TextBlock>
  </my:TabItem>
  <my:TabItem Header=”tab3″
              Style=”{StaticResource st1}”>
    <TextBlock Text=”Some Content in tab3″></TextBlock>
  </my:TabItem>
  <my:TabItem Header=”tab4″
              Style=”{StaticResource st1}”>
    <TextBlock Text=”Some Content in tab4″></TextBlock>
  </my:TabItem>
</my:TabControl>

you can download the source here