Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Picture Tab

I am trying to replace the tab headers with a picture and a name.  I can replace each header no problem.  The issue is I need to change the text color when the tab is selected.

Here is my header content so far:

            <igWindows:TabItemEx >
                    <StackPanel Height="70" Width="70">
                        <Image Source="..\images\transactions.png" Height="48" Width="48" />
                        <TextBlock Text="Transactions"   HorizontalAlignment="Center" />

Is there a way to do this as a style or a template and set the triggers to change the text block's foregound color?

  • 69686

            <Style TargetType="{x:Type igWindows:TabItemEx}">

                <Setter Property="Template">


                        <ControlTemplate TargetType="{x:Type igWindows:TabItemEx}">

                            <StackPanel Height="70" Width="70">

                                <Image Source="{Binding Path=SomePath}" Height="48" Width="48" />

                                <TextBlock Text="{TemplateBinding Header}" Name="header"  HorizontalAlignment="Center" />



                                <Trigger Property="IsSelected" Value="True">

                                    <Setter Property="Foreground" TargetName="header" Value="Red"/>







    Here is what you can use. The image you have to bind to some other property - for example, you can use the Tag property to store the path to the image.

  • 54937
    Verified Answer
    Offline posted in reply to Eric

    You could use the same approach I recommend here for adding an image to a tab using the HeaderTemplate and just add in a datatrigger based on the IsSelected of the tab item. e.g.

                <DataTemplate x:Key="tabItemHeader">
                            Source="{Binding Path=Tag, 
                                    AncestorType={x:Type igWindows:TabItemEx}}}" 
                            Margin="0,0,3,0" />
                        <TextBlock x:Name="txt" Text="{Binding}" VerticalAlignment="Center" />
                            Binding="{Binding Path=IsSelected, 
                                AncestorType={x:Type igWindows:TabItemEx}}}"
                            <Setter TargetName="txt" Property="Foreground" Value="Red" />
            <igWindows:TabItemEx Header="Home" HeaderTemplate="{StaticResource tabItemHeader}">
                    <BitmapImage UriSource="/Images/about_16.bmp" />
            <igWindows:TabItemEx Header="Other" HeaderTemplate="{StaticResource tabItemHeader}">
                    <BitmapImage UriSource="/Images/about_16.bmp" />