40

2-537

Embed Size (px)

DESCRIPTION

developer

Citation preview

Page 1: 2-537
Page 2: 2-537

Roberth KarmanProgram Manager

Navigation Model for Windows XAMLApplications

2-537

Page 3: 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?

Page 4: 2-537

Enable intuitive user interaction

Unified developer experience between Windows and Phone

Customized for device form factor

Navigation Model Goals

Page 5: 2-537

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

Page 6: 2-537

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();

Page 7: 2-537

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

Page 8: 2-537

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!

Page 9: 2-537

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

Page 10: 2-537

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

Page 11: 2-537

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

Page 12: 2-537

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.

Page 13: 2-537

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

Page 14: 2-537

Demo

Page 15: 2-537

Fast App Resume

Page 16: 2-537

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

Page 17: 2-537

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

Page 18: 2-537
Page 19: 2-537

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

Page 20: 2-537

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

Page 21: 2-537

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

Page 22: 2-537

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

Page 23: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

Secondary Tile

Page 24: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

Link in an email

Page 25: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

Link in a message

Page 26: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

From a search result

Page 27: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

From a notification in Action Center

Page 28: 2-537

Always take the user to the deep link page.

Back button goes back to the previous experience.

From a toast

Page 29: 2-537

App previously launched from Primary Tile

App launch from Secondary Tile Break Back button

behavior

DON’T

Page 30: 2-537

App previously launched from Primary Tile

App launch from Secondary Tile

Clear the pages from BackStack

DO

Page 31: 2-537

App previously launched from Primary Tile

App launch from Secondary Tile Create a new

XAML Frame

DO

Page 32: 2-537

App previously launched from Secondary Tile

App launch from another Secondary Tile

Reuse the XAML Frame

DOClear Back stack

Page 33: 2-537

Strand the user on the deep link page

App previously launched from Secondary Tile

App launchfrom Primary Tile

DON’T

Page 34: 2-537

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’.

Page 35: 2-537

App previously launched from Secondary Tile

App launchfrom Primary Tile

Use a different XAML Frame when launched from Primary Tile

DO

Page 36: 2-537

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

Page 37: 2-537

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

Page 38: 2-537

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

Page 39: 2-537

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!

Page 40: 2-537

© 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.