Post
Ask Question

Material Design in XAML - Mash Up!

In this article I will describe how I arrived at this great looking application mock-up, by bringing together Dragablz, MahApps and Material Design In XAML Toolkit.



My initial task when creating that style was to create a separate and compassable way to define the Material Design colour palette for your application. Making the separation between the coolers and the Dragablz Material Design theme immediately provided benefits. I am a big fan of MahApps and I was easily able to take things a step further and use the palette in conjunction with a MahApps Metro Window. Encouraging MahApps to pick up my Material Design palette turned out to be easy because of the way the MahApps guys have also separated out their accents. Very quickly, I had a MahApps MetroWindow up and running, using MahApps themed controls, the Dragablz Material Design theme and all of which were using the Material Design palette. It looked pretty good straight away.

I've previously posted on how to choose a Material Design palette, but for a refresher, have a look at this App.xaml.
 
In addition to the Material Design palette, you need to set a base theme; light or dark.  So add this resource dictionary to your App.xaml: 
  1. <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />  
Getting MahApps to use the Material Design palette only takes a few extra lines in your App.xaml. First, merge in some of the usual MahApps dictionaries:
  1. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />    
  2. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />    
  3. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />    
  4. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />  
Then, where you specify the primary Material Design colour, setup the MahApps brushes, but instead of pulling in one of the MahApps accent dictionaries, configure them manually, to use the Material Design palette:
  1. <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource Primary700}" options:Freeze="True" />    
  2. <SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource Primary500}" options:Freeze="True" />    
  3. <SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource Primary400}" options:Freeze="True" />    
  4. <SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource Primary300}" options:Freeze="True" />    
  5. <SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource Primary200}" options:Freeze="True" />    
  6. <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource Primary700}" options:Freeze="True" />    
  7. <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource Primary500Foreground}" options:Freeze="True" />   
For a complete example see this App.xaml.

Any controls added to your window (or Dragablz TabablzControl) will now default to MahApps styles, but use the Material Design palette, leaving your application looking pretty good. Having got to this point myself, I couldn't help but start playing around a bit further with some Material Design. I created a list box with a few cards and the result looked pretty promising:
 


It wasn't long before I went even further and started styling an entire bunch of controls and ended up with these:

 

I've packaged all these themes (and will continue to add to) on NuGet:

Install-Package MaterialDesignThemes

Where appropriate in your app you can include one or more of the contained resource dictionaries and use the Material Design style for a control instead of the MahApps. All of your other controls will still use the MahApps themes, meaning your application should always look great. A thorough-bred mash-up :).

To select the appropriate resource dictionary and style name the best thing to do is download the source/demo solution from GitHub or from this article and run the two projects in the solution:

  • MahMaterialDragablzMashUp
  • MaterialDesignColors.WpfExample

Or, have a look at this MainWindow.cs.

I hope that all helps you get a good looking application up and running quickly!

As an end note I must mention this great piece of styling in WinForms that inspired me to create the Material Design theme for Dragablz in the first place.


Similar Articles