WPF: binding in TabItem header

Question

I want to display "*" (star) in the title element header when the contents of the TabItem are changed (related data). I have the following TabItem style:

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="_border" 
                                Margin="0,0,0,0" 
                                Padding="0 0 5 0" 
                                Background="Transparent" 
                                BorderBrush="Black" 
                                BorderThickness="0,0,0,0" 
                                CornerRadius="1">
                            <StackPanel Orientation="Horizontal" Margin="10 2 0 2">
                                <TextBlock Foreground="Black" Name="_header">
                                    <ContentPresenter VerticalAlignment="Center" 
                                                      HorizontalAlignment="Center"
                                                      ContentSource="Header" 
                                                      RecognizesAccessKey="True">
                                    </ContentPresenter>
                                </TextBlock>
                                <Button Name="_close"
                                        Visibility="Hidden"
                                        Style="{StaticResource _closeButtonStyle}" 
                                        CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                                        Click="CloseTab_Click"
                                        BorderThickness="0"
                                        Margin="10 0 0 0"
                                        Width="16"
                                        Height="16">
                                    <Image Source="Images/delete_icon16_white.png"
                                           Width="10"
                                           Height="10"
                                           Cursor="Hand"/>
                                </Button>
                            </StackPanel>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="_header" Property="Foreground" Value="White"/>
                            <Setter TargetName="_close" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="_border" Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsSelected" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="_header" Property="Foreground" Value="White"/>
                            <Setter TargetName="_close" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="_border" Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource {x:Static SystemColors.MenuHighlightColorKey}}"/>
                                </Setter.Value>
                            </Setter>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.Resources>

How to add the aforementioned “*” to this style when the IsModified property of the associated data is set to true?

thanks for the answer

Answer 1

Create a TextBlock in the header with Text = "*".

Then bind its visibility using the IsModified property and booleanToVisibility Converter

EDIT: Binding Visibility

Visibility="{Binding IsModified, Converter={StaticResource booleanToVisibilityConverter}}"

And in your resource file

<BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/>

EDIT2: I don't know if you need this information, but only for this case. HeaderTemplate Approach

<Setter Property="HeaderTemplate">
    <Setter.Value>
      <DataTemplate>
        <StackPanel>
          <TextBlock Text="{Binding Content}" />
          <TextBlock Text="*" Visibility="{Binding IsModified, Converter={StaticResource booleanToVisibilityConverter}}"/>
        </StackPanel>
      </DataTemplate>
    </Setter.Value>