TabItem.Header Bold When IsSelected

5.3k views Asked by At

Want all the default styling but the Header FontWeight Bold when the TabItem IsSelected
FontWeight Normal when the TabItem is not selected

<TabItem.Header>
    <TextBlock>Header Text</TextBlock>
</TabItem.Header>

Have found some examples but cannot make any work

5

There are 5 answers

2
Rohit Vats On BEST ANSWER

Apply DataTrigger on TextBlock to see if parent TabItem is selected and set FontWeight to Bold if it evaluates out to be true.

Also you can have that style on TabItem as well but since you mentioned TextBlock in question i am assuming you are doing more styling with TextBlock in there for Header.

<TabItem.Header>
   <TextBlock Text="Header Text">
      <TextBlock.Style>
         <Style TargetType="TextBlock">
            <Style.Triggers>
               <DataTrigger Binding="{Binding IsSelected,
                        RelativeSource={RelativeSource AncestorType=TabItem}}" 
                            Value="True">
                   <Setter Property="FontWeight" Value="Bold"/>
                </DataTrigger>
            </Style.Triggers>
         </Style>
     </TextBlock.Style>
   </TextBlock>
</TabItem.Header>

You can put that in style to resuse it for other tabItems -

<TabControl>
   <TabControl.Resources>
      <Style TargetType="TextBlock" x:Key="HeaderTextBlockStyle">
         <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected,
                          RelativeSource={RelativeSource AncestorType=TabItem}}"
                         Value="True">
                <Setter Property="FontWeight" Value="Bold"/>
             </DataTrigger>
          </Style.Triggers>
       </Style>
    </TabControl.Resources>
    <TabItem>
       <TabItem.Header>
          <TextBlock Text="Header Text"
                     Style="{StaticResource HeaderTextBlockStyle}"/>
       </TabItem.Header>
    </TabItem>
    <TabItem>
      <TabItem.Header>
        <TextBlock Text="Another Header Text"
                   Style="{StaticResource HeaderTextBlockStyle}"/>
      </TabItem.Header>
    </TabItem>
</TabControl>
4
eran otzap On
<XXX.Resources>
    <Style TargetType="TabItem" >
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="FontWeight" Value="Bold" />
            </Trigger>
        </Style.Triggers>
    </Style>
</XXX.Resources>

<Grid>
    <TabControl>
        <TabItem Header="Item 1" />
        <TabItem Header="Item 2" />
    </TabControl>        
</Grid>
0
Gerard On
<Style x:Key="ActiveTab" TargetType="{x:Type TabItem}">
    <Style.Resources>
        <DataTemplate x:Key="header">
            <TextBlock Text="{Binding}" FontWeight="Bold" />
        </DataTemplate>
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="HeaderTemplate"
                    Value="{StaticResource header}" />
        </Trigger>
    </Style.Triggers>
</Style>
0
Brett On

Santiago's answer is very close to what I needed. I still had to figure out how to attach to the TabControl. Here is what I ended up with:

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock FontWeight="Bold" Text="{Binding}"/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.Resources>
    <!--TabItems here-->
</TabControl>
0
Sergio Santiago On

I've used a mix between some answers and this worked perfect for me:

<Style TargetType="TabItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" Text="{Binding}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>