Roberth KarmanProgram Manager
Navigation Model for Windows XAMLApplications
2-537
Launching and dismissing apps How the user moves between between apps
Displaying a page within an app How the user moves between different views in an
app
The Navigation Model is the cornerstone of the user experience
What is a Navigation Model?
Enable intuitive user interaction
Unified developer experience between Windows and Phone
Customized for device form factor
Navigation Model Goals
Windows.UI.XAML.FrameWindows.UI.XAML.Page Frame is hosted in Window.Current.Content Page is hosted in Frame.Content
Windows.UI.XAML.Frame.NavigateWindows.UI.XAML.Frame.BackStackWindows.UI.XAML.Frame.ForwardStack Add\Remove pages to the navigation journal
Windows.UI.XAML.Navigation.PageStackEntry Page type, Parameter, Navigation Transition
Windows XAML Page Navigation
Same Frame and Page APIs
Frame Creation and Page Navigation
Frame rootFrame = Window.Current.Content as Frame;
if (rootFrame == null){
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
// Place the frame in the current WindowWindow.Current.Content = rootFrame;
}
if (rootFrame.Content == null){
rootFrame.Navigate(typeof(HubPage), e.Arguments);}
// Ensure the current window is activeWindow.Current.Activate();
NavigationService.Navigate works with URIs
NavigationService.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative));
Frame.Navigate works with page-type
rootFrame.Navigate(typeof(HomePage), e.Arguments);
That was not like Windows Phone Silverlight...URIs are removed in Windows XAML
Same Page and Frame Navigation Model as 8.0
Fast App Resume is enabled by default
Apps can opt into being suspended on BackSystem.Windows.Navigation.NavigationService.PauseOnBack
Silverlight 8.1 Phone Apps
2-517: What’s New with Windows Phone Silverlight Apps!
Pages are not cached by default Set NavigationCacheMode.Enabled on the page
constructor Watch memory limits on Phone and set the
CacheSize Use NavigationCacheMode.Required to always keep
the page cached
Windows.UI.XAML.Frame.CacheSizeWindows.UI.XAML.Page.NavigationCacheMode
Page Caching
Same Page Caching APIs
When suspended, the app needs to save the navigation journal together with app state
Windows.UI.XAML.Frame.GetNavigationState
When resumed after Termination, the app needs to create a new Frame and restore the navigation journal
Windows.UI.XAML.Frame.SetNavigationState
Saving\Restoring Navigation Journal
Restore the navigation journal after Termination
Software Back Button for Windows AppsDifferent implementation for Back button
Windows apps present a software back button to allow navigation to previous page
Back button is hidden on top page Users swipe from left to go to another
app Current app is suspended when not in
the foreground
Hardware Back Button for Phone Apps
Different implementation for Back button
Phones apps should not show a software Back button
Hardware button is exposed to apps as HardwareButtons.BackPressed event
Phone apps need to handle BackPressed for page to page navigation or to dismiss temporary UI
If BackPressed is unhandled, the System will navigate away from current app to the previous app in the App Back Stack . Current app will be suspended.
void InitializeBackButtonHandling(){ HardwareButtons.BackPressed += HardwareButtons_BackPressed;}
private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e){ Frame frame = Window.Current.Content as Frame;
if (frame == null) return;
if (frame.CanGoBack) { frame.GoBack(); e.Handled = true; }}
Back Button Handling
Demo
Fast App Resume
Fast App Resume is on by default for Windows XAML and Silverlight 8.1 apps
Re-launching an app will reuse the suspended app instance
Apps have the ability to resume the previous UX
Fast Application Resume
Resume your app as the user left if rather than starting it fresh
Start the app fresh if a long period of time has elapsed since the user last access it
When in doubt, provide the user with a choice
Guidance for Launching from Primary Tile
Suspending and Re-launching Apps
When suspended: save the state and navigation journal optionally, save timestamp
When re-launched: check the PreviousExecutionState and timestamp If ClosedByUser, NotRunning or not used recently, start
fresh If Suspended, resume If Terminated, restore state and navigation journal and
resume
Suspending and Resuming
When navigating away using Start or Task Switcher: OnNavigatedFrom raised when calling
GetNavigationState on the Suspend handler Need to manually select ”Suspend” if running from
VS
When navigating back to an app: OnNavigatedTo will only be raised if your app was
terminated and you call SetNavigationState
Handling exclusive resources
Need to release resource when navigating away outside of the app
Need to re-acquire resource when returning
There is not always a page navigation: Re-acquire resources when the app is
resumed/re-activated
What’s a Deep Link? Where does it go?
A link to somewhere within the app other than the top
A pin on Start Screen
Toast
Action Center
Link in the browser
An attachment in an email
…more
On Phone, Back button from a deep link page should take the user where they came from
Always take the user to the deep link page.
Back button goes back to the previous experience.
Secondary Tile
Always take the user to the deep link page.
Back button goes back to the previous experience.
Link in an email
Always take the user to the deep link page.
Back button goes back to the previous experience.
Link in a message
Always take the user to the deep link page.
Back button goes back to the previous experience.
From a search result
Always take the user to the deep link page.
Back button goes back to the previous experience.
From a notification in Action Center
Always take the user to the deep link page.
Back button goes back to the previous experience.
From a toast
App previously launched from Primary Tile
App launch from Secondary Tile Break Back button
behavior
DON’T
App previously launched from Primary Tile
App launch from Secondary Tile
Clear the pages from BackStack
DO
App previously launched from Primary Tile
App launch from Secondary Tile Create a new
XAML Frame
DO
App previously launched from Secondary Tile
App launch from another Secondary Tile
Reuse the XAML Frame
DOClear Back stack
Strand the user on the deep link page
App previously launched from Secondary Tile
App launchfrom Primary Tile
DON’T
App previously launched from Secondary Tile
App launchfrom Primary Tile
Include UI that brings the user to the top of the app
DO
Do clear the navigation history when navigating ‘Home’.
App previously launched from Secondary Tile
App launchfrom Primary Tile
Use a different XAML Frame when launched from Primary Tile
DO
Resume your app if the user has done work that would be frustrating to lose.
Start the app fresh if a long period of time has elapsed since the user last used it
Avoid stranding users coming from Deep Links
Phone Back button takes users where they came from
UX Guidance Summary
What Does this Mean to the Developer
Similar Page Navigation Model on Windows and Phone
Fast App Resume is the default on both Windows and Phone
Soft back button for Windows apps, HW Back for Phone apps
Follow UX guidance to preserve Back Button behavior on Phone
Today 2-549: Strategies for World Domination: Design
Research Advice for Developers
Tomorrow 3-554: Animation in Modern Windows App:s
Yesterday 2-507: Developing Apps using the Common XAML UI
Framework 2-516: What About XAML UI and Controls?
Other Talks...and the Evaluation
Your Feedback is Important
Fill out an evaluation of this session and help shape future events.
Scan the QR code to evaluate this session on your mobile device.
You’ll also be entered into a daily prize drawing!
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.