Live Chat Icon For mobile
Live Chat Icon

How can I add a style to a TabItem that is used in the TabControl ?

Platform: WPF| Category: TabControl

Here is a custom style that changes the look and feel of the tabs (TabItems) in the corresponding window.

[XAML]

<Style TargetType='TabItem'>
  <Setter Property='BorderThickness' Value='3'/>
  <Setter Property='BorderBrush' Value='Red'/>
  <Setter Property='Background' Value='LightBlue'/>
  <Setter Property='VerticalContentAlignment' Value='Center'/>
  <Setter Property='HorizontalContentAlignment' Value='Center'/>
  <Setter Property='Template'>
    <Setter.Value>
      <ControlTemplate TargetType='{x:Type TabItem}'>
        <Border>
          <Grid>
            <Grid>
              <Border CornerRadius='3,3,0,0' Background='{TemplateBinding Background}' 
                   BorderBrush='{TemplateBinding BorderBrush}' 
                   BorderThickness='{TemplateBinding BorderThickness}'/>
            </Grid>
            <Border BorderThickness='{TemplateBinding BorderThickness}' 
                 Padding='{TemplateBinding Padding}'>
              <ContentPresenter ContentSource='Header' 
                 HorizontalAlignment='{TemplateBinding HorizontalContentAlignment}' 
                 VerticalAlignment='{TemplateBinding VerticalContentAlignment}'/>
            </Border>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

This is how the tabs look with the above style applied on them:

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.