Mahapps.Metro HamburgerMenu with PowerShell

I started a long time ago making a tutorial series about using WPF with PowerShell. For theming my apps, I always use Mahapps and really like this theme. This time I’d like to introduce a new Control available in their latest release: the “HamburgerMenu Control”.

As introduced by Jan Karger in his blog: “since v1.4.0 of Mahapps.Metro contains this new control which is mostly the same as the one from the UWP Community Toolkit”.

In this post, I’ll show you how it works and how to use it with PowerShell. So, at the end of this post, you should have something which looks like this:

What’s the HamburgerMenu?

It’s a ContentControl with an item list. An option item list on the left and the content presenter on the right side. I’ll use “HamburgerMenuIconItem” class for the example in this post. There’s also other classes introduced as HamburgerMenuItem, HamburgerMenuGlyphItem and HamburgerMenuImageItem that may interest you. If you want to use “.png” image, use the latter one.

How it’s done?

Important:

You need .Net Framework 4.5 at least to use this feature.

Make sure you have the latest version Mahapps.Metro “.dll” files.

Refer to this article to get those dll files, otherwise you can download this project here.

The structure of the project:

“.\Assembly\”  contains Mahapps.Metro *.dll

“.\Resources\” contains all external resources. I placed my resources icon there.

“.\Views\” contains all views which will be shown in the content control and linked to the Item/Option Menu.

.\Form.xaml: main xaml form.

.\Form.ps1: PowerShell script.

- Prepare xaml files:

You will need a main Xaml: Form.xaml having the customed window with Mahapps.

We also need four xaml files that will be attached to each item/content in the Menu:

     - About.xaml

     - Home.xaml

     - Private.xaml

     - Settings.xaml

Here is the content of Home.xaml for example.

I’ll make a second post later how to communicate with Controls inside those views.

- Set up Hamburger DataTemplate:

DataTemplate is used to specify the template for the items and options used in the menu.

Create a Grid.Resources tag and add it into the main Grid of Form.xaml.

You probably noticed that there is two dataTemplate here:

First DataTemplate is for MenuItemTemplate

Second is for OptionsMenuItemTemplate

- Add HamburgerMenu controls:

Now we are going to add the HamburgerMenu itself and its content. I’ve made some modifications compared to the lines presented in Mahapps.Metro documentation. I precisely removed the attribute ItemClick="HamburgerMenuControl_OnItemClick" in the tag because event will be handle in Powershell script.

Keep the Name of the control as it is, it will be used to call it in the script.

There are three sections that you need to know before going any further:

-          Items [elements on the left (at top)]

-          Options [elements on the left (fixed at the bottom)]

-          Content

Here is a picture to make it simple:

Now let’s add the content inside the HamburgerMenu controls.

Copy and paste the following lines inside the tag added earlier:

Technically the icon attribute presented above is not really for Icon but for “System.Windows.Controls.Canvas”. I’m just using the attribute to bind the content with the visualbrush in the DataTemplate. It was easier this way. J

Those canvas are stored in the resources folder (Icons.xaml) and called inside the Window.Resources tag. There is another way for it if you want to use a *.png image.

Where is the script?

That’s it for all xaml, now let’s move onto the PowerShell script.

A - Binding the view:

Do you remember that we had tags HamburgerMenuIconItem.Tag earlier?

We are going to target them and bind the corresponding view. Originally, they were using UserControl for Views in C# but I found it was easier to work this way and to access the controls inside afterwards. 

First, target the HamburgerMenuControl, then do the same for each view you have in your menu.

For each view in the folder views, you need to load the xaml separately like this:

Well, you can do it in a loop if you want but you do need a PowerShell variable for each view.

And finally, add the just created xaml object to the view tag.

And repeat the process for each view you have.

A - Binding the Control:

In C#, they are using the following function to update the content:

private void HamburgerMenuControl_OnItemClick(object sender, ItemClickEventArgs e)

{

    // set the content

    this.HamburgerMenuControl.Content = e.ClickedItem;

    // close the pane

    this.HamburgerMenuControl.IsPaneOpen = false;

}

We’re going to do the same in our favorite scripting language J

It does look alike actually:

The difference is that the function is called for Options and Items in C# but they are called separately in PowerShell.

If you have some trouble to follow the little tuto, I advise you to download the little code here and see for yourself how it works. Thanks for reading and see you in the nex part.