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

Icon Pack – Material Design In XAML 1.4

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.

MaterialDesignIcons.png

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: share-variant-16.png

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" />

thumb-up-24.png  thumb-up-36.png  thumb-up-48.png

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

IconPack.png

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.

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

Using MahApps Dialog Boxes in a MVVM Setup

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:

Dialogs via MVVM in MahApps
Dialogs via MVVM in MahApps

This should make it into release 1.2.0.