APP-741T_Matos

Metro style apps using XAML: Make your app shine: 

Metro style apps using XAML: Make your app shine Marco Matos Senior Program Manager Microsoft Corporation APP-741T

Agenda: 

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: 

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

Memories app : 

Memories app Dissecting a Metro s tyle XAML app demo

User Interface (UI) in a Metro style app: 

User Interface (UI) in a Metro s tyle app Tile -> Splash screen -> a pp (app UI)

App lifetime : 

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

Prepare for termination: 

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: 

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 from suspension Resuming event on a pp o bject App still lives in resident memory Scenarios around rehydrating live data

Memories app : 

Memories app Activating app through search demo

Activation overrides: 

Activation overrides OnLaunched 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: 

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: 

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: 

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

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

Memories app : 

Memories app Integration with charms demo

Supporting share as a source: 

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: 

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

Memories app : 

Memories app Integration with search demo

Supporting search [app is running]: 

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: 

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

PowerPoint Presentation: 

Navigation

Familiar XAML navigation APIs: 

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

Frame and page semantics: 

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

Basic navigation demo : 

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

Enabling navigation history: 

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

Basic navigation demo : 

Basic navigation d emo Caching of pages demo

Transitions: 

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

Basic navigation demo : 

Basic navigation d emo Adding animation library demo

Basic navigation sample: 

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

PowerPoint Presentation: 

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 s uspend/activate mechanics What do users expect from great apps

Related sessions: 

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: 

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

PowerPoint Presentation: 

Feedback and q uestions http ://forums.dev.windows.com Session f eedback http ://bldw.in/SessionFeedback t hank you

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