wpf tabitem with image

Question

I need to use, with a stile of mahapps.metro, the tabitem with a text and an image.. this is my code:

<TabItem Style="{StaticResource gMetroTabItem}">
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image Name="img" Height="auto" Width="auto" Source="/myProject;component/Resources/Black_Tools.png" />
            <TextBlock Text="tabItem2" Margin="2,0,0,0" VerticalAlignment="Center" />
        </StackPanel>
    </TabItem.Header>
</TabItem>

and this is the code of the style:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
    </Style>

    <Style TargetType="TabItem" x:Key="gMetroTabItem">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="6,2,6,2" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="MinWidth" Value="5" />
        <Setter Property="MinHeight" Value="5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Label x:Name="root" FontSize="46.67">
                        <ContentPresenter ContentSource="Header"  RecognizesAccessKey="True" />
                    </Label>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource AccentColor}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger Property="IsSelected" Value="false">
                            <Setter  TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource GrayNormal}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger SourceName="root" Property="IsMouseOver" Value="True">
                            <Setter  TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Lime" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <!--<Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <AdornerDecorator>
                        <ContentPresenter Content="{Binding}"/>
                    </AdornerDecorator>
                </DataTemplate>
            </Setter.Value>
        </Setter>-->
    </Style>
</ResourceDictionary>

but doesn't work, 'cause the style go to change a text property, and the image isn't displayed..

any ideas?

Answer 1

Scratch what I said before. This is much easier.

You only need the TabControl.ItemTemplate. This is what determines the layout of the header. With some tricky binding to ancestor, you can bind to the TabItem's properties for your DataTriggers.

In this example I show how to bind to the IsSelectedProperty. I'll leave the IsMouseOver as an exercise for you. Hint: Bind to the IsMouseOver using ElementName "root", and then in the setter use TargetName="root".

    <Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type local:TabItemHeaderData}">
                    <StackPanel>
                        <TextBlock Name="root" Text="{Binding LabelText}"/>
                        <Rectangle Fill="{Binding RectFill}"/>
                    </StackPanel>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding
                            RelativeSource={RelativeSource
                            Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="true">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Blue" />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding
                            RelativeSource={RelativeSource
                            Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="false">
                            <Setter TargetName="root" Property="Foreground">
                                <Setter.Value>
                                    <SolidColorBrush Color="Black" />
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type local:TabItemHeaderData}">
                    <ContentControl Content="{Binding Content}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then you'll need to create a dataobject.

public class TabItemHeaderData
{
    public Brush RectColor { get; set; }
    public String LabelText { get; set; }
    public object Content { get; set; }
}

Then you just set the values in the dataobject like so.

<TabControl Style="{StaticResource gMetroTabControl}">
    <local:TabItemHeaderData RectColor="Black" LabelText="John">
        <local:TabItemHeaderData.Content>
            <Button>George</Button>
        </local:TabItemHeaderData.Content>
    </local:TabItemHeaderData>
    <local:TabItemHeaderData RectColor="Black" LabelText="John">
    </local:TabItemHeaderData>
</TabControl>

Answer 2

From the screencast images you posted:

• designtime: http://www.screencast.com/t/TV20zfCi
• runtime: http://www.screencast.com/t/7w9rBBEkhMnH

This is indicative of the Black_Tools.png having incorrect properties. Make sure the image is set to be a resource and copied to the output directory:

• Right Click Black_Tools.png in the solution explorer > Properties
• Build Action: Resource
• Copy to Output Directory: Copy always (or Copy if newer)

If the image isn't set as a resource and copied to the output directory, then you'll see the image at design time since the image can be resolved in the solution. However, at runtime, the image path is different since the files will be in the project's output directory.