Windows Store apps - Lessons Learned
description
Transcript of Windows Store apps - Lessons Learned
![Page 2: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/2.jpg)
Windows StoreView states
Store
What we’ve done
Navigation
Blend
Touch
![Page 3: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/3.jpg)
What we’ve done
![Page 4: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/4.jpg)
Blend
![Page 5: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/5.jpg)
Design time data
View model Design time view model AppBar binding
![Page 6: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/6.jpg)
View model
![Page 7: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/7.jpg)
Design time view model
![Page 8: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/8.jpg)
AppBar binding
![Page 9: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/9.jpg)
View states
![Page 10: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/10.jpg)
Your app must support a snapped layout.
In landscape orientation, your app’s
functions must be fully accessible when the
app’s display size is 1024 x 768. Your app
must remain functional when the customer
snaps and unsnaps the app.
![Page 11: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/11.jpg)
…maintain state, context, and interactivity
![Page 12: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/12.jpg)
What?
Full screen
Filled
Snapped
![Page 13: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/13.jpg)
How?
Design time – define visual states
or
![Page 14: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/14.jpg)
How?
Run time – apply correct visual state
Window.Current.SizeChanged += SizeChanged;...private void SizeChanged(object sndr, WindowSizeChangedEventArgs e){ var viewState = ApplicationView.Value; VisualStateManager.GoToState(this, viewState.ToString(), false);}
![Page 15: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/15.jpg)
Tips
//When snapped visual state is static, use a page if (ApplicationView.Value == ApplicationViewState.Snapped) Frame.Navigate(typeof (MySnappyPage));
![Page 16: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/16.jpg)
Tips
var snappedLeft = ApplicationView.Value ==
ApplicationViewState.Snapped && Window.Current.Bounds.Left == 0;
![Page 17: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/17.jpg)
Gotcha
![Page 18: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/18.jpg)
Tips
![Page 19: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/19.jpg)
Navigation
![Page 20: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/20.jpg)
App anatomy
Application
Window
Frame
Page
![Page 21: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/21.jpg)
Fundamental navigation
//Plain navigationFrame.Navigate(typeof (MySuperDuperPage));
//Parameter passingFrame.Navigate(typeof (DisplayItemPage), itemId);
![Page 22: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/22.jpg)
Fundamental navigation
protected override void OnNavigatedTo(NavigationEventArgs e){ int itemId = (int) e.Parameter; _myViewModel.SelectedItemId = itemId;
.
.
.}
![Page 23: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/23.jpg)
Fundamental navigation
Frame.CanGoBackFrame.GoBack()Frame.CanGoForwardFrame.GoForward()
Frame.Navigated Frame.NavigatingFrame.NavigationFailedFrame.NavigationStopped
![Page 24: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/24.jpg)
Helpers
![Page 25: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/25.jpg)
State
SessionState
FrameState
FrameState
…
NavigationState
PageStatePageStatePageState
NavigationState
PageStatePageStatePageState
App
![Page 26: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/26.jpg)
TipsUse a background frame for stuff that must survive page switching
Background Frame
Frame
Page
Background Page
![Page 27: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/27.jpg)
Tips
Use caching for improved navigation performance
![Page 28: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/28.jpg)
Gotcha
Parameter passing – you can pass any object….
BUT
The platform only support serializing of basic types
![Page 29: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/29.jpg)
Summary
Rootframe Navigate with simple parameters Use caching if app with many pages
![Page 30: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/30.jpg)
Touch
![Page 31: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/31.jpg)
Pointer events
PointerPressed, PointerReleased, PointerMoved
PointerCanceled, PointerCaptureLost, PointerEntered, PointerExited, PointerWheelChanged
![Page 32: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/32.jpg)
Pointer events
• e.GetCurrentPoint() .PointerId .Properties.IsMiddleButtonPressed
• e.GetIntermediatePoints
![Page 33: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/33.jpg)
Static gestures
• Derived from Pointer-events
Tapped DoubleTapped Holding RightTapped
• One concurrent event per UI Element
![Page 34: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/34.jpg)
Manipulation gesture events
ManipulationStarted, ManipulationCompleted
ManipulationDelta, ManipulationInertiaStarting, ManipulationStarting
![Page 35: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/35.jpg)
Manipulation gesture events
• Inertia• Often used to set RenderTransform• Derived from Pointer-events • One concurrent event per UI Element
![Page 36: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/36.jpg)
Brainstormer
![Page 37: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/37.jpg)
Screen table - "Surface"/FlatFrog
no up or down difficult with global UI elements
Use popups or duplicates
![Page 38: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/38.jpg)
Concurrent popup
One concurrent event per UI Element, e.g. Canvas
double-click better than tap-n-hold ugly trick: Put a grid with many elements inside
the canvas (Routed events)
![Page 39: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/39.jpg)
Manipulation transforms
CompositeTransform e.Cumulative.Rotation No concurrent Repeatbuttons e.handled = true
![Page 40: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/40.jpg)
Windows Store
![Page 41: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/41.jpg)
Windows Store
Publish WACK Privacy policy Live account Publisher name Background audio
Manage Change app name Remove app
![Page 42: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/42.jpg)
WACK
Is step 1 of certification process always run this.
![Page 43: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/43.jpg)
Privacy policy
Blog post by Dag König: http://bit.ly/RWGouo
Must have in metadata and accessible in app.
![Page 44: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/44.jpg)
Live account
Use separate live-ID for win8 apps.
![Page 45: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/45.jpg)
Publisher name
For company accounts, ”must” match registration papers.
![Page 46: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/46.jpg)
Background audio
Background audio prevents suspend, do not autoplay!
![Page 47: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/47.jpg)
Change app name
App name can be changed.
![Page 48: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/48.jpg)
Remove app
Apps cannot be removed, only updated to no markets.
![Page 49: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/49.jpg)
Get started – Store
• Create Microsoft account• Create Store account• Reserve app name
![Page 50: Windows Store apps - Lessons Learned](https://reader036.fdocuments.us/reader036/viewer/2022081511/5560b59ad8b42a033c8b49d0/html5/thumbnails/50.jpg)
Thank you for coming!
the end