.Net, C#, Material Design, UI, UX, WPF, xaml

Material Design In XAML – Mash Up!

I have previously posted about the Material Design theme for Dragablz.  In this post I will describe how I arrived at this application mock-up, by combining Dragablz, Material Design in XAML Toolkit, and MahApps:

Material Design Demo
Material Design Demo

My initial task when creating that style was to create a separate, and composable way to define the Material Design colour palette for your application.  Making the separation between the colours and the Dragablz Material Design theme immediately paid benefit.  Being 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 MetroWindow. Encouraging MahApps to pick up my Material Design palette turned out to be easy because of the way the MahApps guys had 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, take 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:

<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.  Firstly, merge in some of the usual MahApps dictionaries:

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<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:

<SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource Primary700}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource Primary500}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource Primary400}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource Primary300}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource Primary200}" options:Freeze="True" />
<SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource Primary700}" options:Freeze="True" />
<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:

MaterialDesignEarlyPrototype

It wasn’t long before I went even further and started styling a whole bunch of controls, and ended up with these:

MaterialDesignDemo2

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 in place 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 and run the two projects in the solution:

  • MahMaterialDragablzMashUp
  • MaterialDesignColors.WpfExample

Or, take a look at this MainWindow.cs.

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, which inspired me to create the Material Design theme for Dragablz in the first place.

Advertisements

27 thoughts on “Material Design In XAML – Mash Up!

  1. That is very good, thanks for your shared! Hope you can continue support for material design…. And support showdefaultclosebutton binding to tabitemviewmodel for each tabitemview….

    1. Hi, glad you like. Are you saying you’d like to enable the close button on a per-tab basis? If so this is achievable making a custom header content, which I illustrate in one of the Dragablz demo projects on GitHub. But if you need help give me a shout, I will try and do a blog post to explain further.

      1. Hi guy, I really need to enable the close button on a per_tab because i have any per_tab can not CLOSE while all another tab can CLOSE. Can you help me!
        Ex:
        – HOME tab cannot CLOSE
        – ANOTHER tab can CLOSE

      1. Anywhere. I want to make an app that will work on 3 monitors, and when I drag from the first one and drop on the second, it auto maximize. You got it ?

      2. The TabablzControl Control has a IsDraggingWindowChanged event.

        So you could subscribe to that, and in the code-behind handler maximise the Window.

        XAML would look a bit like:

        <dragablz:TabablzControl IsDraggingWindowChanged="TabablzControl_IsDraggingWindowChanged" />
        

        Code-behind would look a bit like:

        private void TabablzControl_IsDraggingWindowChanged(object sender, RoutedPropertyChangedEventArgs<bool> e)
        {
            if (!e.NewValue)
                WindowState = WindowState.Maximized;
        }
        

        Hope this helps.

  2. Fascinating Work!

    Got a dumb question: is it possible to disable the drag behavior in Dragablz demo or i should make the custom tab control using material themes? Any instruction would be great. thx for the great work.

    1. Hey, no, not a dumb question: I’ve had several people ask me. I’ve recently added a FixedHeaderCount so you can lock tabs. To lock them all, just set it to your total tab count.

      Enjoy!

    1. — Material Design: MahApps Compatibility –
      ResourceDictionary Source=”pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml “

  3. Hi,
    is this compatible with .net v4.0?
    It fails to install beacause of that .net version…
    Is there any way to make it works with .net 4.0?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s