Metro style apps using XAML: Make your app shine 11/21/2018 5:35 PM APP-741T Metro style apps using XAML: Make your app shine Marco Matos Senior Program Manager Microsoft Corporation © 2010 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.

Agenda Handle lifecycle semantics within your app Expand app’s presence by supporting multiple activation points Light up your app with Windows 8 charms Learn how to incorporate navigation mechanics in your app You’ll leave with knowledge of how to Deeply integrate your Metro style app with Windows 8

My app can provide a 1st class experience to users by integrating with Windows 8

Dissecting a Metro style XAML app demo Memories app Dissecting a Metro style XAML app

User Interface (UI) in a Metro style app Tile -> Splash screen -> app (app UI)

App lifetime Running App Suspended App Terminated App Suspending Low Memory Resuming

Prepare for termination OnSuspending event on app object is your chance Understanding user’s intentions for save Utilize familiar serialization mechanisms available in XAML Metro style apps

Prepare for Termination – App.xaml.cs //SuspensionManager.cs can be found in SDK Samples async protected void OnSuspending(object sender, SuspendingEventArgs args) { SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral(); await SuspensionManager.SaveAsync(); deferral.Complete(); }

Resuming from suspension Resuming event on app object App still lives in resident memory Scenarios around rehydrating live data

Activating app through search demo Memories app Activating app through search

Activation overrides OnLaunched OnSearchActivated OnSharingActivated User invokes app from Tile or Notification OnSearchActivated User selects your app from search pane OnSharingActivated User selects your app from share pane OnFilePickerActivated User selects your app via FilePicker to select files from OnFileActivated User selects file your app has a registered handler for

Responding to activation Provide content to your Window Determine PreviousExecutionState for lifecycle management Navigate your app to desired view based on activation type Activate your Window to dismiss Splash screen

Reloading state on activation – App.xaml.cs //SuspensionManager.cs can be found in SDK Samples async protected override void OnLaunched(LaunchActivatedEventArgs args) { if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) // Do an asynchronous restore await SuspensionManager.RestoreAsync(); } Window.Current.Content = new MainPage(); Window.Current.Activate();

OnSearch activation protected override void OnSearchActivated(SearchActivatedEventArgs args) { base.OnSearchActivated(args); if (Window.Current.Content == null) Window.Current.Content = new MainPage(); } (Window.Current.Content as MainPage).NavigateToSearchPage(args.QueryText); Window.Current.Activate();

My XAML app integrates with charms making my app a 1st class experience for users.

Integration with charms demo Memories app Integration with charms

Supporting share as a source Understand user’s intention via explicit selection or implicit information displayed DataRequested callback once user initiates share Use deferral semantics for sharing larger data packages Eg. sharing an image

DataTransferManager private void _share_DataRequested(DataTransferManager sender, DataRequestedEventArgs args) { var shareDeferral = args.Request.GetDeferral(); … args.Request.Data.SetBitmap(stream); args.Request.Data.Properties.Title = "Memories Photo"; args.Request.Data.Properties.Description = "Memories Photo Description"; shareDeferral.Complete(); }

Integration with search demo Memories app Integration with search

Supporting search [app is running] QuerySubmitted callback when user submits search term Provide search suggestions using SuggestionsRequested event Great opportunity for employing navigation to handle search

SearchManager private void _searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args) { SearchPaneSuggestionsRequest request = args.Request; … //create a filtered search list based on request request.SearchSuggestionCollection.AppendQuerySuggestions(filteredList); } private void _searchPane_QuerySubmitted(SearchPane sender, SearchPaneQuerySubmittedEventArgs args) { _frame.Navigate(“MyApp.SearchResultsView", args.QueryText);

Navigation

Familiar XAML navigation APIs Windows.UI.Xaml.Navigation NavigationCacheMode NavigationMode NavigationFailed NavigationStopped LoadCompleted Frame GoBack() GoForward() Navigate() Source Page OnNavigateFrom OnNavigateTo

Frame and page semantics Frame control represents the navigation container Page control represents discrete sections of content Share objects/data between your pages Frame Page 2 Page 3 Page 1

Navigate between pages Share data between pages demo Basic navigation demo Navigate between pages Share data between pages

Enabling navigation history Page defines caching behavior on NavigationCacheMode Frame controls navigating history stack GoBack() GoForward() Navigate() NavigationMode

demo Basic navigation demo Caching of pages

Transitions Integrate Windows 8 look and feel for transitions Frame supports content transitions EntranceThemeTransition Other transitions available for different scenarios

Adding animation library demo Basic navigation demo Adding animation library

Basic navigation sample <Frame Source="NavigationExample.StartPage" > <Frame.ContentTransitions> <TransitionCollection> <EntranceThemeTransition FromHorizontalOffset="200" /> </TransitionCollection> </Frame.ContentTransitions> </Frame>

Bring it all together

What do users expect from great apps I can move from point A to point B quickly and efficiently, even in feature filled apps Use the Navigation stack for flow and journaling Gestures and patterns work as I expect Embrace the charms into your app My progress is not interrupted from taking a break Properly handle suspend/activate mechanics

Related sessions [APP-737T] Metro style apps using XAML: What you need to know [APP-494T] Stand out with styling and animation in your XAML app [TOOL-515T] Tips and tricks for developing Metro style apps using XAML [APP-405T] Share: your app powers the Windows 8 share experience [APP-406T] Search: integrating into the Windows 8 search experience [APP-409T] Fundamentals of Metro style apps: How and when your app will run

Further reading and documentation Metro style app Dev Center Links Learn to build Metro style apps Metro style app samples Building your first Metro style app with C#, C++, and Visual Basic Developing basic Metro style apps with C#, C++, and Visual Basic

thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback

11/21/2018 5:35 PM © 2011 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. © 2011 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.