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

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

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

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

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

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

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

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

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

12. Activating app through search
demo
Memories app
Activating app through search

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

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

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

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

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

18. Integration with charms
demo
Memories app
Integration with charms

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

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

21. Integration with search
demo
Memories app
Integration with search

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

23. 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);

24. Navigation

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

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

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

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

29. demo
Basic navigation demo
Caching of pages

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

31. Adding animation library
demo
Basic navigation demo
Adding animation library

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

33. Bring it all together

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

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

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

37. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

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