Prism 6 Shell view and Hamburger menu for Windows 10 Universal apps

Prism 6 is the current ported version of Prism for Universal Windows apps for Windows 10. In this article we will see how to setup a basic wiring for Prism and Hamburger menu. You can think of it as Master page in Asp.net or Shared view template for MVC or as a basic template for Prism + Hamburger app development in Universal windows.

Note the RegisterTypes method in the code snippet above. It simply tells that where
to look for Viewmodel classes as we are going to use AutoWiring of Viewmodel
that Prism offers.

Adding Shell view

Now add two folders to the solution. Name it Views and ViewModels. As the name suggests,
we will put all the XAML view files into Views folder and corresponding viewmodel
classes in ViewModels folder.
Right click on the Views folder and add new Blank page and name it Shell.xaml. This
page will serve as a master page and this is the page where we will put our Hamburger
menu.

The highlighted code part in the snippet above is part of Prism integration. We are
also interested in auto wiring of views with the viewmodel and so setting ViewModelLocator.AutoWireViewModel
to true.
The SplitViewRadioButtonStyle is defined in App.xaml. For keeping this article short
and with minimal code, I have supplied source code at the end of this article.
You can open App.xaml file there and see definition for this style.

Adding ShellViewModel

Now it’s time to add corresponding viewmodel for the Shell view we just created in
previous step. To do so, add class named ShellViewModel into the ViewModels folder.
The code for this viewmodel will look like following:

Now if you revisit code of bindings defined Shell.xaml with the ShellViewModel, you
would see it is very much self-explanatory. The SplitViewCommand toggles visibility
of full pane when we click on Hamburger button. The other Radiobutton is bound
to HomePageCommand which simply navigates Frame to Home screen. The HomePage.xaml
is what we will define in next step. But before that, let’s revisit App.xaml.cs
file and add following lines of code:

The code shown above tells Prism to use our Shell view as main content holder for
Frame. The Frame is used for navigation purpose in Prism’s Navigation service.

Adding home page

While creating view which we will navigate through navigation service of Prism, we
need to follow naming convention. The view name must end with Page suffix. Here
we would like to add view named Home. So our naming of the file would be HomePage.xaml.
The markup for this view would go like following: