Make your app shine Marco Matos Senior Program Manager Microsoft Corporation APP741T Agenda Handle lifecycle semantics within your app Expand apps presence by supporting multiple activation points ID: 752129
Download Presentation The PPT/PDF document "Metro style apps using XAML:" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Metro style apps using XAML:Make your app shine
Marco MatosSenior Program ManagerMicrosoft Corporation
APP-741TSlide2
Agenda
Handle lifecycle semantics within your app Expand app’s presence by supporting multiple activation pointsLight 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 8Slide3
My app can provide a 1st
class experience to users by integrating with Windows 8Slide4
Memories app
Dissecting a Metro style XAML app
demo Slide5
User Interface (UI) in a Metro style app
Tile -> Splash screen -> app (app UI)Slide6
App lifetime
Running App
Suspended App
Suspending
Resuming
Terminated App
Low MemorySlide7
Prepare for termination
OnSuspending event on app object is your chanceUnderstanding user’s intentions for saveUtilize familiar serialization mechanisms available in XAML Metro style appsSlide8
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
();
}Slide9
Resuming from suspension
Resuming event on app objectApp still lives in resident memoryScenarios around rehydrating live dataSlide10Slide11Slide12
Memories app
Activating app through search
demo Slide13
Activation overrides
OnLaunchedUser invokes app from Tile or NotificationOnSearchActivatedUser 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 forSlide14
Responding to activation
Provide content to your WindowDetermine PreviousExecutionState for lifecycle managementNavigate your app to desired view based on activation type
Activate your Window to dismiss
Splash
screenSlide15
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
();
}Slide16
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
();
}Slide17
My XAML app integrates
with charms making my app a 1st class experience for users.Slide18
Memories app
Integration with charms
demo Slide19
Supporting share as a source
Understand user’s intention via explicit selection or implicit information displayedDataRequested callback once user initiates share Use deferral semantics for sharing larger data packagesEg. sharing an imageSlide20
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
();
}Slide21
Memories app
Integration with search
demo Slide22
Supporting search [app is running]
QuerySubmitted callback when user submits search termProvide search suggestions using SuggestionsRequested eventGreat opportunity for employing navigation to handle searchSlide23
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
);
}Slide24
NavigationSlide25
Familiar XAML navigation APIs
Windows.UI.Xaml.NavigationNavigationCacheModeNavigationModeNavigationFailed
NavigationStopped
LoadCompleted
Frame
GoBack
()
GoForward
()
Navigate()
Source
Page
OnNavigateFrom
OnNavigateToFrameSlide26
Frame and page semantics
Frame control represents the navigation containerPage control represents discrete sections of contentShare objects/data between your pages
Frame
Page 1
Page 2
Page 3Slide27
Basic navigation demo
Navigate between pagesShare data between pages
demo Slide28
Enabling navigation history
Page defines caching behavior on NavigationCacheModeFrame controls navigating history stackGoBack()
GoForward
()
Navigate()
NavigationMode
Slide29
Basic navigation demo
Caching of pages
demo Slide30
Transitions
Integrate Windows 8 look and feel for transitionsFrame supports content transitionsEntranceThemeTransition
Other transitions available for different scenariosSlide31
Basic navigation demo
Adding animation library
demo Slide32
Basic navigation sample
<Frame
Source
="
NavigationExample.StartPage
"
>
<
Frame.ContentTransitions
>
<
TransitionCollection
> <EntranceThemeTransition FromHorizontalOffset
="200" /> </TransitionCollection
> </Frame.ContentTransitions>
</
Frame
>Slide33
Bring it all togetherSlide34
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 appsSlide35
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 runSlide36
Further reading and documentation
Metro style app Dev Center LinksLearn 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 BasicSlide37
Feedback and questions
http://forums.dev.windows.com Session f
eedback
http
://bldw.in/SessionFeedback
t
hank youSlide38
©
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.Slide39