frame rootframe = window.current.content as frame; if (rootframe == null) { // create a frame to act...

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

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



Link in an email



Link in a message



From a search result



From a notification in Action Center



From a toast

App previously launched from Primary Tile

App launch from Secondary Tile Break Back button

behavior

DON’T


App launch from Secondary Tile

Clear the pages from BackStack

DO


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 launchfrom Primary Tile

DON’T



Include UI that brings the user to the top of the app

DO

Do clear the navigation history when navigating ‘Home’.



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.

frame rootframe = window.current.content as frame; if (rootframe == null) { // create a frame to act...

Documents