A lot of UWP apps use the hamburger menu for page navigation, so I made a sample app.
Since Windows.UI.Xaml.Controls.Page is a UserControl the idea is to just replace the content of the MainPage instead of really navigate through pages.
I encountered some problems:
- Navigation events (OnNavigatingFrom, OnNavigatedTo and OnNavigatedFrom) were not called because no real navigation occurs.
- Page transitions were not applied
- NavigationCacheMode was not taken in consideration
I solved these problems by creating a BasePage class with properties to set transitions and exposing new navigation events. The NavigationCacheMode is managed by the code.
Sadly NavigationEventArgs cannot be inherited (it’s a sealed class) and has no constructor so I had to use my own class.
The example app has some pages to navigate through and uses different transitions. The app runs correctly on the PC and on the phone.
To change the menu appearence on mobile I used the VisualStateManager: on mobile (but also on pc if you resize the window to less than 720 pixels) the menu is totally closed and a little larger when opened.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="m_SplitView.CompactPaneLength" Value="40"/>
<Setter Target="m_SplitView.OpenPaneLength" Value="200"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowView">
<VisualState.Setters>
<Setter Target="m_SplitView.CompactPaneLength" Value="0"/>
<Setter Target="m_SplitView.OpenPaneLength" Value="250"/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Here are some screenshots:
The app looks good also using the dark theme
I made a simple control for the menu item and in the MainPage there’s the standard SplitView. To let the code open the correct page and select the menu item you need to put in the ActionName the page’s class name.
<SplitView DisplayMode="CompactOverlay" IsPaneOpen="False"
Grid.Row="1"
x:Name="m_SplitView"
CompactPaneLength="40" OpenPaneLength="200">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<controls:MenuButton Icon="" Label="Home" ActionName="HamburgerMenuNavigationUWP.Pages.HomePage" Tapped="MenuButton_Tapped" />
<controls:MenuButton Icon="" Label="Data page" ActionName="HamburgerMenuNavigationUWP.Pages.DataPage" Tapped="MenuButton_Tapped" />
</StackPanel>
</ScrollViewer>
<StackPanel Grid.Row="1" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}" BorderThickness="0,1,0,0" >
<controls:MenuButton Icon="" Label="About" ActionName="HamburgerMenuNavigationUWP.Pages.AboutPage" Tapped="MenuButton_Tapped" />
<controls:MenuButton Icon="" Label="Settings" ActionName="HamburgerMenuNavigationUWP.Pages.SettingsPage" Tapped="MenuButton_Tapped" />
</StackPanel>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid Name="m_Grid">
<!-- Here goes the content -->
</Grid>
</SplitView.Content>
</SplitView>
Pages must inherit from the BasePage class but are normal pages for the rest.
All the “dirty” work is done in App.cs (back stack, page cache, show/hide the back button, manage the back button event).
private void RootFrame_Navigating(object sender, NavigatingCancelEventArgs e)
{
if (e.SourcePageType == typeof(MainPage))
return;
MainPage mp = (Window.Current.Content as Frame).Content as MainPage;
// Do not navigate to the same page:
if (m_CurrentPage != null && e.SourcePageType == m_CurrentPage.SourcePageType){
if (mp != null)
mp.IsPaneOpen = false;
e.Cancel = true;
return;
}
Pages.BasePage oldPage = null;
Pages.BasePage newPage = null;
//Check the cache:
if (!m_PagesCache.TryGetValue(e.SourcePageType.FullName, out newPage))
newPage = (Pages.BasePage)Activator.CreateInstance(e.SourcePageType, new object[] { });
if (newPage != null) {
newPage.Transitions = new TransitionCollection();
if (mp != null) {
if (mp.MainGrid.Children.Count > 0)
oldPage = mp.MainGrid.Children[0] as Pages.BasePage;
// Call page events:
if (oldPage != null) {
oldPage.OnNavigatingFrom(e);
if (e.Cancel)
return;
}
// Animations:
if (m_GoingBack) {
if (oldPage != null) {
oldPage.Transitions = new TransitionCollection();
if (oldPage.BackExitTransition != null)
oldPage.Transitions = new TransitionCollection() { oldPage.BackExitTransition };
}
if (newPage.BackEnterTransition != null)
newPage.Transitions = new TransitionCollection() { newPage.BackEnterTransition };
} else {
if (oldPage != null) {
oldPage.Transitions = new TransitionCollection();
if (oldPage.ForwardExitTransition != null)
oldPage.Transitions = new TransitionCollection() { oldPage.ForwardExitTransition };
}
if (newPage.ForwardEnterTransition != null)
newPage.Transitions = new TransitionCollection() { newPage.ForwardEnterTransition };
}
if (oldPage != null) {
// Remove oldPage from the MainPage:
mp.MainGrid.Children.Remove(oldPage);
// Call oldPage events:
oldPage.OnNavigatedFrom(new Pages.NavigationArgs() { NavigationMode = m_GoingBack ? NavigationMode.Back : NavigationMode.Forward });
}
// Add the new page to the MainPage:
mp.MainGrid.Children.Add(newPage);
// Call newPage events:
newPage.OnNavigatedTo(new Pages.NavigationArgs() { NavigationMode = m_GoingBack ? NavigationMode.Back : NavigationMode.New, Parameter = e.Parameter, SourcePageType = e.SourcePageType });
// Select the menu item
if (!mp.SelectMenu(e.SourcePageType.FullName) && !string.IsNullOrEmpty(newPage.SelectMenuAction))
mp.SelectMenu(newPage.SelectMenuAction);
// Close the menu:
mp.IsPaneOpen = false;
// Add the new page to the back stack
if (!m_GoingBack) {
if (m_CurrentPage != null)
m_BackStack.Add(m_CurrentPage);
}
m_CurrentPage = new PageStackEntry(e.SourcePageType, e.Parameter, e.NavigationTransitionInfo);
// Save/remove pages with NavigationCacheMode.Required
if (oldPage != null) {
if (!m_GoingBack && oldPage.NavigationCacheMode == NavigationCacheMode.Required) {
m_PagesCache[oldPage.GetType().FullName] = oldPage;
} else if (m_GoingBack && m_PagesCache.ContainsKey(oldPage.GetType().FullName)) {
m_PagesCache.Remove(oldPage.GetType().FullName);
}
}
// Show/hide the back button
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
m_BackStack.Count > 0 ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
m_GoingBack = false;
}
}
e.Cancel = true;
} // RootFrame_Navigating
You can download the source code here.
If you have advice, ideas, better solutions feel free to leave a comment.
Have fun. 😉