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?
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>