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:
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:
It wasn’t long before I went even further and started styling a whole 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 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.
dragablz.net 
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….
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.
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
Ok, I will try and knock up an example for you. Give me a few days.
I have set up a new demo project in this repo: https://github.com/ButchersBoy/DragablzSamplez
Load up the solution and run the OptionCloseButton sample. There’s a few pieces to the jigsaw, so study it closely; unfortunately I haven’t got time to do a write-up/blog just yet.
Hope this helps.
James
I would try this now, thanks for you infomation!
Thank for your supported! I waiting for your.
I have added a FixedHeaderCount propety…this makes it easier for creating a fixed Home screen.
Thank for your supported! I waiting for you.
This is awesome!!!
Thank you very much, James!
Hey… How to auto maximize window on drop event (i mean, when I release the dragged item) ?
I will try and provide a sample this week. Are you meaning when you drop at the top of the window, or just anywhere?
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 ?
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:
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.
Tks James !! Worked fine !!
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.
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!
works like charm. thanks for the quick reply!
I get an exception on this line, and i cant find the MaterialDesignTheme.Mahapps resource. What should I do?
— Material Design: MahApps Compatibility –
ResourceDictionary Source=”pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml “
Managed to fixed it. I just needed to install this package as well. Sorry , and thanks for the article!
Hello. Where can i get complete tutorial of using Dragablz and MaterialDesignThemes
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?
Please refer to https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/wiki/.Net-4.0-Compatibility-&–Visual-Studio-Versions
Great piece of work James! Thx a lot !