CodePlex / Azure Metro TabItem Style for WPF

I've been working on a TabItem style for WPF to combine both the tab style on the CodePlex website and Windows Azure website.

CodePlex Tabs

Azure Tabs

The main difference apart from the inclusion of the icons on the Azure tabs is the mouse over style. On CodePlex when you mouse over a tab it colours in the bottom border. On Azure the coloured border is always there, and hovering the mouse fills the tab in blue.

I have gone for the mouse over style from Azure with the tabs from CodePlex. I have also made a replica of the navigation tabs at the top of the Azure page.

WPF Style

As I have been using MahApps.Metro for my styles, my style uses some of their resources, but could easily be updated to work standalone. Simply add the following styles to a ResourceDictionary to use them. The border colour of the tabs can be changed by modifying the BorderBrush property.

	<Style x:Key="AzureTabItem" TargetType="{x:Type TabItem}">
	<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="TabItem">
	<StackPanel>
	<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
	Padding="12,2,24,2"
	BorderThickness="0,0,0,4"
	Margin="2,2,2,0"
	SnapsToDevicePixels="True">
	<Border.Style>
	<Style TargetType="Border">
	<Setter Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource Gray5}"/>
	</Setter.Value>
	</Setter>
	</Style>
	</Border.Style>
	<Label x:Name="root" FontSize="15">
	<Label.Style>
	<Style TargetType="Label">
	<Setter Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource BlackColor}" />
	</Setter.Value>
	</Setter>
	</Style>
	</Label.Style>
	<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
	</Label>
	</Border>
	<Canvas Height="10" Width="20" x:Name="arrow" Margin="25,0,0,0"
	HorizontalAlignment="Left" SnapsToDevicePixels="True">
	<Path Data="M 0 0 H 20 L 10 10 Z"
	StrokeThickness="0"
	Fill="{DynamicResource AccentColorBrush}"/>
	</Canvas>
	</StackPanel>
	<ControlTemplate.Triggers>
	<Trigger Property="IsSelected" Value="true">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource WhiteColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="BorderBrush">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	<Setter TargetName="arrow" Property="Visibility" Value="Visible"/>
	</Trigger>
	<Trigger Property="IsSelected" Value="false">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource BlackColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="arrow" Property="Visibility" Value="Hidden"/>
	</Trigger>
	<Trigger Property="IsMouseOver" Value="True">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource WhiteColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"></Setter>
	<Setter TargetName="border" Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	</Trigger>
	</ControlTemplate.Triggers>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>

view raw AzureTabItem.xaml hosted with ❤ by GitHub

	<Style TargetType="TabItem" x:Key="AzureNavTabItem">
	<Setter Property="FocusVisualStyle" Value="{x:Null}" />
	<Setter Property="IsTabStop" Value="False" />
	<Setter Property="BorderThickness" Value="0" />
	<Setter Property="Margin" Value="0,2,20,0"/>
	<Setter Property="Padding" Value="0"/>
	<Setter Property="HorizontalContentAlignment" Value="Left" />
	<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="15" Margin="{TemplateBinding Margin}"
	FontWeight="SemiBold">
	<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 Gray2}" />
	</Setter.Value>
	</Setter>
	</Trigger>
	<Trigger SourceName="root" Property="IsMouseOver" Value="True">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}" />
	</Setter.Value>
	</Setter>
	</Trigger>
	</ControlTemplate.Triggers>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>

view raw AzureNavTabItem.xaml hosted with ❤ by GitHub

An example of using the styles:

	<Grid>
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<TabControl Grid.Row="0" Padding="0">
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="HOME">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="PAGE INFO"></TabItem>
	<TabItem Header="CHANGE HISTORY"></TabItem>
	</TabControl>
	</TabItem>
	<TabItem Header="SOURCE CODE" BorderBrush="Red">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="FILES"></TabItem>
	<TabItem Header="HISTORY"></TabItem>
	<TabItem Header="FORKS"></TabItem>
	</TabControl>
	</TabItem>
	<TabItem Header="DOCUMENTATION" BorderBrush="LightGreen">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="ITEM 1"></TabItem>
	<TabItem Header="ITEM 2"></TabItem>
	</TabControl>
	</TabItem>
	</TabControl>
	</Grid>

view raw AzureTabItemExample.xaml hosted with ❤ by GitHub