Search code examples
wpfbindingtabcontroltabitem

WPF TabItem - Image Binding - using Triggers


I want to show Image inside of the Title of header in TabControl

This question(WPF TabItem - Image Binding) seems is right, but I have using Triggers and it doesn't help on my code.

Here is what I have Providing:

 <TabControl  Name="MainTabControl" Margin="0,28,0,0" TabStripPlacement="Top" >
            <TabControl.Resources>
<Image x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<Image x:Key="imgComment" Source="Icons/red icons/notification.png" />

                <Style TargetType="TabItem" >
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <WrapPanel>
                                    <TextBlock   Text="{Binding}"
                           MouseDown="UIElement_OnMouseDown" 
                               FontSize="18"    
                             />
                                    <Image  Height="25"  Margin="4,0,4,0" 
  Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
                                </WrapPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="0" Margin="2,0">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="5,2"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
                                        <Setter TargetName="Border" Property="Background" Value="Transparent" />
                                        <Setter Property="Foreground" Value="{DynamicResource TabItemNormal}"/>

                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>

<TabItem Name="tiProfile" Header="a"  Tag="{StaticResource imgProfile}"></TabItem>
<TabItem Name="tiComment" Header="b"  Tag="{StaticResource imgComment}"></TabItem>
 </TabControl>

Solution

    1. the binding from TabItem.HeaderTemplate to the TabItem.Tag must be via FindAncestor of TabItem type.

    2. instead create Images in Resources, create BitmapImage, and bind it the Image.Source.

    so, Resources:

    <BitmapImage x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
    <BitmapImage x:Key="imgComment" Source="Icons/red icons/notification.png" />
    

    Header DataTemplate:

     <Image Height="25" Margin="4,0,4,0"
            Source="{Binding Tag, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />