WPF TabItem - Image Binding - using Triggers

Question

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>

score 1 · Accepted Answer · answered Nov 07 '17 at 22:31

the binding from TabItem.HeaderTemplate to the TabItem.Tag must be via FindAncestor of TabItem type.
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}}}" />

WPF TabItem - Image Binding - using Triggers

1 Answers1