How to Use the Material Design Theme With Dragablz Tab Control

Already if you run this project you will have a tab control that supports Chrome-style tearing out of tabs. But it won't look too good. So, the next step is to bring in the Material Design colours and tell Dragablz to use the Material Design style.

Open your App.xaml. We need to merge in three dictionaries. The first two are to set up the Material Design colour palette. The MaterialDesignColors assembly contains a ResourceDictionary for each color (a collection of hues and accents). To create a full palette we need to bring in a primary colour, set up some hue brushes and then bring in a secondary color for our accent color. The third resource dictionary is to include the Dragablz theme for Material Design. Finally we instruct our tab control to use the correct style.

Don't worry, it's not too complicated. The following is the full App.xaml:
And that's it. Fire up your baby and you are done. You can change the colours by changing the two colour resource dictionaries that are referenced. You can also tweak the hues, but do not change the brush names. Dragablz will be looking for these.
Links:

• NuGet:
  
  
  • Dragablz - Dragable and tearable tab control for WP.
  • Material Design Colors XAML Resources 0.0.0.
    
    
• GitHub:
  
  
  • Dragablz
  • MaterialDesignColorsInXamlToolkit.
    
    
• Google Material Design Color Guidelines.

Enjoy!