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

Advertisements

3 thoughts on “Customizing TabItem Style(no coding)

  1. Hi Lee,

    When having the TabStripPlacement to the left, the text remains horizontal instead of being turned 90 degrees with the tabs running down the side. I tried to use LayoutTransform as suggested in a WPF example but found this is unavailable and RenderTransform didn’t seem to work for varying sized tabs.

    Any help would be greatly appreciated.

    Thanks a lot,
    Martin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s