CODEWITHSUNDEEP
wpf
Harold Finch
Harold Finch

Reputation: 586

How to set header style in TabItem?

I've created in my Window.Resource a Style that hold the background of the selected TabItem. What I want achieve is set a custom height for the TabItem header, this is my Style:

<Window.Resources>
    <ResourceDictionary>
        <Style x:Key="CustomTabItem" TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border" Background="Transparent">

                            <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Left"
                                        ContentSource="Header"
                                        Margin="10,3">
                            </ContentPresenter>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True" SourceName="Border">
                                <Setter TargetName="Border" Property="Background" Value="Gainsboro" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#FFC5C5C5" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Window.Resources>

usually I add the style to my TabControl like so:

<TabItem Tag="Tab1" Style="{StaticResource CustomTabItem}">

I just want set the header height for all the TabControls that have the CustomTabItem style, any suggestion?

Upvotes: 0

Views: 3095

Answers (1)

Emmanuel DURIN
Emmanuel DURIN

Reputation: 4913

You are making a confusion between TabControl and TabItem.

A TabControl has many TabItems.

Each TabItem is actually a Tab.

So the solutions are :

1 Set Style to all TabItems of all TabControls

A very simple way to apply the style is to remove the x:Key attribute of the TabItem style, and the style will apply to all TabItems

<!-- No x:Key="CustomTabItem" below   -->
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">

2 Set Style for all tabs of a TabControl

<TabControl ItemContainerStyle="{DynamicResource TabItemStyle1}" >
  <TabItem Header="Hello">Hello content</TabItem>
  <TabItem Header="Goodye">Goodbye content</TabItem>
</TabControl>

3 Set Style per TabItem

<TabControl>
  <TabItem  Style="{StaticResource CustomTabItem}" Header="Hello">Hello content</TabItem>
  <TabItem Header="Goodye">Goodbye content</TabItem>
</TabControl>

Regards

Upvotes: 1

Related Questions