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.

Let’s get started. We will call app “HamburgerApp”. You need to choose Blank app template under
Visual C# -> Windows -> Universal -> Blank App (Universal Windows).

We are going to use Prism 6 and Unity (IoC container). To install follow either of the steps

Run following commands in package manager console in Visual studio
Install-Package Prism.Windows -Version 6.0.1
Install-Package Prism.Unity -Version 6.1.1

Right click the solution and choose Manage Nu-Get packages
Search for Prism.Windows and Prism.Unity

Integrating Prism for app cycle events

This is fairly straightforward and your App.xaml and App.xaml.cs should match to following code:

App.xaml

<prism:PrismUnityApplication
    x:Class="HamburgerApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:prism="using:Prism.Unity.Windows"
    RequestedTheme="Light">
</prism:PrismUnityApplication>

App.xaml.cs

using System;
using System.Globalization;
using System.Threading.Tasks;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Prism.Mvvm;
using Prism.Unity.Windows;

namespace HamburgerApp
{
    /// <summary>
    ///     Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : PrismUnityApplication
    {
         #region Methods

        protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
         {
             Window.Current.Activate();

             return Task.FromResult<object>(null);
        }

         protected override Task OnInitializeAsync(IActivatedEventArgs args)
         {
             RegisterTypes();
             return base.OnInitializeAsync(args);
        }

        private void RegisterTypes()
        {
            ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver(viewType =>
            {
                var viewModelTypeName = string.Format(CultureInfo.InvariantCulture,
                      "HamburgerApp.ViewModels.{0}ViewModel, HamburgerApp", viewType.Name);
                var viewModelType = Type.GetType(viewModelTypeName);
                 return viewModelType;
             });
        }

        #endregion
    }
}

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.

<prism:SessionStateAwarePage
    x:Class="HamburgerApp.Views.Shell"
    xmlns:prism="using:Prism.Windows.Mvvm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    prism:ViewModelLocator.AutoWireViewModel="True"
    mc:Ignorable="d">
    <SplitView DisplayMode="CompactOverlay"  IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay}"
               OpenPaneLength="128">
        <SplitView.Pane >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Button FontFamily="Segoe MDL2 Assets" Content="" Command="{Binding SplitViewCommand}"
                     Width="48" Height="48" Background="Transparent" BorderThickness="0"/>

                <RadioButton Content="Home" Grid.Row="1" Style="{StaticResource SplitViewRadioButtonStyle}"  FontSize="13"  GroupName="Navigation" Command="{Binding HomePageCommand}" >
                     <RadioButton.Tag>
                         <SymbolIcon   Symbol="Home" Width="48" Height="48" />
                    </RadioButton.Tag>
                </RadioButton>
            </Grid>
        </SplitView.Pane>
    </SplitView>
</prism:SessionStateAwarePage >

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:

using System.Windows.Input;
using Prism.Commands;
using Prism.Windows.Mvvm;
using Prism.Windows.Navigation;

namespace HamburgerApp.ViewModels
{
    public class ShellViewModel : ViewModelBase
    {
         #region Static and Constants

        public bool IsPaneOpen
        {
            get { return isPaneOpen; }

            set { SetProperty(ref isPaneOpen, value); }
         }

        public ICommand SplitViewCommand { get; set; }
         public ICommand HomePageCommand { get; set; }

         #endregion

        #region Fields

        private readonly INavigationService navigationService;
         private bool isPaneOpen;

        #endregion

        #region Constructor

        public ShellViewModel(INavigationService navigationService)
         {
             this.navigationService = navigationService;
            SplitViewCommand = new DelegateCommand(OnSplitView);
            HomePageCommand = new DelegateCommand(OnHomePage);
        }

        #endregion

        #region Methods

        private void OnHomePage()
        {
             navigationService.Navigate("Home", null);
        }

         private void OnSplitView()
        {
            IsPaneOpen = !IsPaneOpen;
        }

        #endregion
    }
}

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:

  protected override UIElement CreateShell(Frame rootFrame)
        {
            var shell = new Shell();
            (shell.Content as SplitView).Content = rootFrame;
             return shell;
        }

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:

<prism:SessionStateAwarePage
    x:Class="HamburgerApp.Views.HomePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="using:Prism.Windows.Mvvm"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock FontSize="26" Margin="10">Welcome to Home page!</TextBlock>
    </Grid>
</prism:SessionStateAwarePage>

Now it’s time to Press F5. We have just completed setting up a nice template which follows MVVM pattern for Hamburger menu implementation and makes use of Prism 6 for Universal windows apps.

Code
https://www.dropbox.com/s/2p4urvhbe0p50ex/HamburgerApp.zip?dl=0