Change TabItem's Header FontWeight

1.8k views Asked by At

I would like to change the TabItem's Header FontWeight to Bold when IsSelected = True from my ResourceDictionary.

Some Code

 <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border Name="Border"
                            Background="White"
                            BorderBrush="White" 
                            BorderThickness="1,1,1,0"
                            Margin="0,0,0,-1" >
                        <ContentPresenter x:Name="ContentSite"
                                          Height="25"
                                          VerticalAlignment="Bottom"
                                          HorizontalAlignment="Center"
                                          ContentSource="Header"
                                          Margin="12,2,12,2"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="#F2F1F0" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="0.5,0.7,0.5,0" />
                        <Setter Property="Header">
                            <Setter.Value>
                                <TextBlock Text="{Binding Path=Header.Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}"
                                           FontWeight="Bold" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="White" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0.5" />
                    </Trigger>

.....etc.....

The above approach doesn't work. Also setting the HeaderTemplate instead of Header it works but it ruins my template. Finally, setting the TextBlock.FontWeight as a Property inside the Trigger changes all the TextBlocks inside the TabItem.

Any Proposals?

UPDATE

I picked up @ShineKing answer because it helped me solve my problem. Basically what i did is add a DataTrigger to the TextBlock used as a Header to my "custom" TabItem.

            <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
1

There are 1 answers

2
ReeganLourduraj On BEST ANSWER

Could you try this code to change TextBlock as Bold

<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>
</TabControl>