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.





An example of using the styles: