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

Happy 2nd Birthday to Material Design In XAML

Posted on February 1, 2017 by James

Happy 2nd Birthday!

Material Design In XAML Toolkit Turns Two Years Old

On 1st February 2017 Material Design In XAML marks it’s 2nd year since it appeared on GitHub. Right up front I have to apologise for all the bugs I haven’t fixed. Plenty of people are helping out, but the project can only move so fast. I always try to prioritise API quality over cramming in more fixes and updates. Hopefully this shows, as I feel that on the whole the library is easy to use, robust, and ultimately helps make apps look great.

It’s been a busy, successful, and rewarding two years. Sometimes frustrating, always educational. I’m continually dealing with users over email, Twitter, GitHub, Gitter; it’s now got to the point where support is probably 75% of the time I spend on the project. Surely the biggest highlight for me was getting a Microsoft MVP award off the back of this work (and Dragablz), and traveling to Seattle for the MVP Summit. It was great to meet so many people I’ve got to know on GitHub and Twitter.

Two years in I’d like to share some stats on this project. .Net itself is undergoing major open source shakeup, with a big emphasis on the web/ASP side of things. WPF is perhaps more of a “niche” tech, and may not be the bleeding edge XAML platform a anymore, but still has plenty of use, and the some of these stats illustrate the continuing popularity of WPF and the growing popularity of the toolkit:

Nuget downloads: 84,839
Average Nuget downloads per day: 118
GitHub stars: 2,340
GitHub forks: 4734
GitHub average views per day: 1675
GitHub average unique visitors per day: 319
Website average unique visitors per day: 177
Gitter chat room users: 300+ users

Two years ago, all these stats were a big fat zero. The trend has been upward ever since. I’ve seen and supported students, enterprises and hobbyists use the toolkit to help bring modern styling, palettes and UX flow to their desktop apps, and there are now
continually new projects appearing on GitHub referencing the library.

This isn’t a monster JavaScript framework, and is much smaller than friend, and big-brother WPF project, MahApps. But it’s healthy, and it’s growing.

Currently I’m focusing on “doobry”, a NoSQL editor for Azure DocumentDb. I feel this is becoming a great example of how to utilise Material Design In XAML on the desktop to create useful, attractive apps. Obviously there will be more to come for the toolkit itself over the next 12 months.

Thanks to all the users, contributors and everyone who has supported the library over the last 2 years!

(Birthday Cake from https://material.uplabs.com/posts/happy-birthday-icon

C#, Design, MahApps, Material Design, UI, UX, WPF, xaml

Icon Pack – Material Design In XAML 1.4

Posted on January 18, 2016 by James

New for release 1.4 of Material Design In XAML Toolkit is a full icon pack. Icon design is a skill itself and finding or creating good icons when designing an application can be a time consuming task. To help in this regard I am pleased to announce that the entire Material Design Icons collection is now included in the library.

It’s a great collection, containing over 1,400 icons, including many of the standard icons we see on Android phones and many more additional icons added by its own community. It’s worthwhile heading over to the website to get an overview of the icons, and there’s a search feature to help you track down the icon you’re after.

Using the icons in your WPF application is easy. Assuming you’ve already installed Material Design In XAML Toolkit, the XAML is as simple as:


<materialDesign:PackIcon Kind="ShareVariant" />

To give you:

The icons are SVG based, so scale nicely:

<materialDesign:PackIcon Kind="ThumbUp" Height="24" Width="24" />
<materialDesign:PackIcon Kind="ThumbUp" Height="36" Width="36" />
<materialDesign:PackIcon Kind="ThumbUp" Height="48" Width="48" />

You can see the entire icon collection in the main demo application:

MahApps

Furthermore, the base class for the icon has been added to ControlzEx (credit to @punker76 for this idea), so in the future you may well see MahApps use the same API for Modern Design Language icons, giving WPF developers a common, simple icon XAML syntax:

<materialDesign:PackIcon Kind="SomeMaterialIcon" />
<mahApps:PackIcon Kind="SomeModernIcon" />

Release Details

Various other fixes, enhancements, performance improvements have recently gone into the library. Versions 1.3.1, 1.3.2, and now 1.4.0 contain some welcome community contributions. To see details of all changes hit the Releases GitHub page.

.Net, C#, MahApps, UI, WPF, xaml

Using MahApps Dialog Boxes in a MVVM Setup

Posted on May 29, 2015 by James

Finally, after a couple of years of take, take, take; I’ve made a contribution to MahApps. Working in a financial institution it’s not always easy to commit back to open source projects, so with a little bit of out-of-hours work I’ve solved a little problem I’ve seen a few people asking: “how do you use MahApps dialog boxes in an MVVM setup?” And now my conscience is clear. 😉

Now You Can Launch a Dialog Box From a View Model.

There’s a couple of simple things you have to do:

1) Use an attached property in your Window to register your view model with the dialog sub-system.

Assuming your View’s DataContext is set to the view model from where you want to launch the dialog, add these attributes:


<Controls:MetroWindow 

        xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" 
        Dialog:DialogParticipation.Register="{Binding}"
 >

2) Grab & Use DialogCoordinator to open dialogs.

You can instantiate DialogCoordinator directly, or, good citizens will probably want to inject in the interface IDialogCoordinator into their view model. This will play nicely with TDD, and is agnostic to whatever DI framework you may be using.

Without a DI framework you could just do something like this:


new MainWindowViewModel(DialogCoordinator.Instance);

Opening up a dialog from your view model is now easy, using the IDialogCoordinator instance. To most methods the first parameter named “context” will typically be your view model. This is how the coordinator will match the view model to the window (with what was registered in step 1) and display the dialog. If you have multiple windows open, the dialog will display on the correct window. Show your dialog from inside your view model just like this:


_dialogCoordinator.ShowMessageAsync(this, "Message from VM", "MVVM based dialogs!")

If you want to see this in action and follow the code through open up the MahApps MetroDemo project (part of the MahApps source code), and launch from the “Dialogs” Menu:

This should make it into release 1.2.0.

Dragable, tearable, dockable WPF TabControl. Open source to boot.

Category: MahApps