Thursday 2 May 2013

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:

Posted by at
Labels: , , , ,

12 comments:

  1. Unknown26 September 2013 at 01:15

    Hi, I tried your styling but in my application, the text foreground appears to be white and doesn't display. Could you post your entire application? Thank you very mcuh

    ReplyDelete
  2. Dave26 September 2013 at 19:18

    Hi, I've uploaded a demo here.

    Hope this helps.

    ReplyDelete
  3. Unknown21 January 2014 at 04:15

    The following link has something cool you may like
    http://goldcing.blogspot.com/2013/12/making-wpf-application-contain-both.html

    ReplyDelete
  4. Unknown22 August 2014 at 07:44

    That's really awesome! Thank you very much....

    ReplyDelete
  5. Unknown8 October 2014 at 18:04

    You should submit to MahApps.Metro (if you haven't already). Great looking tabs!

    ReplyDelete
  6. Unknown28 July 2015 at 09:28

    Thank you very much,,,,

    ReplyDelete
  7. Unknown28 July 2015 at 09:30

    Thank you very much,,,,

    ReplyDelete
  8. Unknown2 October 2015 at 21:08

    Awesome... I am new to WPF and metro.. I was looking for this all day and now I just find it. You should submit this to mahapps.metro like other person said..

    And for the record your work works in first try :)

    ReplyDelete
  9. Anonymous7 February 2016 at 11:44

    Thank you!!!! Great job!!!!

    ReplyDelete
  10. Unknown2 November 2016 at 15:59

    Hi there! Great work, which license is it on? Can it be used in not open source project? Thank you!

    ReplyDelete
    Replies
    1. Dave2 November 2016 at 16:03

      Hey. I've not put a license on it but go ahead and use it for whatever you want, open or closed source. Thanks for your interest :)

      Delete
    2. Unknown2 November 2016 at 16:07

      Thank you so much <3

      Delete

Subscribe to: Post Comments (Atom)