wpf tabitem with image - wpf

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

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.

Answer 2

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>