Embed Size (px)
DESCRIPTION
Seminar with a bunch of tips and tricks and lessons learned regarding windows 8 modern UI app developement. Topics include: Blend/design time data, view states, touch, navigation and Windows Store.
Citation preview
Windows Store apps
lessons learned
@andyhammar - [email protected]
@roberthedgate - [email protected]
Windows StoreView states
Store
What we’ve done
Navigation
Blend
Touch
What we’ve done
Blend
Design time data
Design time view model
AppBar binding
Design time view model
Windows.ApplicationModel.DesignMode.DesignModeEnabled
AppBar binding
View states
Windows 8 View States
Full vs Filled vs Snapped
• Full view
• Filled view
• Snapped view
Full view
Nothing strange about this, the normal state
Filled view
• Usually nothing strange about this
• You have minimum of 1024 pixel of place,
might be more
• Can perhaps show a little less than in full
view
• Be aware that user might not reach
controls with their thumbs
Filled view Store
Snapped view
• You HAVE to support this, requirement
from Microsoft
• It is always 320 pixel wide
Then how do we do a snapped view
Use same view, reposition elements
Use same view, reposition elements
• Difficult to maintain in blend
• Easy to accidently alter something in the
other when doing a change in one. We have
dependencies between states.
Use same view with visibility
• Could very easy create duplicate data
• Make sure you use usercontrols, bindings etc
Navigate to a different page
• Catch OnSizeChanged
• ApplicationView.Value will tell you your state.
• Do your navigation etc here.
• Advantage if you want your app to always show
the same snapped content. Tip: Put this in a
base class.
Summary
Use separate snapped view, either by
using visibility or navigate.
Touch
Touch
...just works
Pointer events
PointerPressed, PointerReleased, PointerM
ovedPointerCanceled, PointerCaptureLost, PointerEntered, Poin
terExited, PointerWheelChanged
Pointer events
• e.GetCurrentPoint().PointerId
.Properties.IsMiddleButtonPressed
• e.GetIntermediatePoints
Static gestures
• Derived from Pointer-events
Tapped
DoubleTapped
Holding
RightTapped
• One concurrent event per UI Element
Manipulation gesture events
ManipulationStarted, ManipulationCompleted
ManipulationDelta,ManipulationInertiaStarting, ManipulationStarting
Manipulation gesture events
• Inertia
• Often used to set RenderTransform
• Derived from Pointer-events
• One concurrent event per UI Element
Brainstormer
Screen table - "Surface"/FlatFrog
no up or down
difficult with global UI elements
Use popups or duplicates
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)
Manipulation transforms
CompositeTransform
e.Cumulative.Rotation
No concurrent Repeatbuttons
e.handled = true
Navigation
Windows 8 Navigate
Rootframe
• Add a seperate rootframe over the existing one.
• Background
• Animation
• Audio
Rootframe, xaml
Rootframe, code behind
Navigate static class
We have to handle Navigate, Back, CanGoBack etc
Parameter serialization & suspend
• Now there is a possibility to use object to navigate by. Great?
• It was only possible to use strings before.
• Now these types can be serialized by Frame.GetNavigationState:• numbers
• characters
• strings
• guids
• boolean
Parameter serialization & suspend
GetNavigationState doesn't support serialization of a
parameter type which was passed to Frame.Navigate
Parameter serialization & suspend
There are a few ways around this example:
• Use strings (or other approved types)
• In your complexd object serialize and
deserialize manually using strings.
• Save object globally and reference object by
strings when navigate
page caching
Page caching works both back and forward
• You can not just turn on caching back which is
what we usually want to have
backstack clearing
How to clear cache?
Summary
It is nice to use a own rootframe to be
able to have the same background
image/animation/sound etc in all views
It is more convenient to use approved
parameters until all serializable object are
allowed
If you turn on page caching make sure
you clear the cache on the correct level
Windows Store
Windows Store
Publish WACK
Privacy policy
Live account
Publisher name
Background audio
Manage Change app name
Remove app
WACK
Is step 1 of certification process always run this.
Privacy policy
Blog post av Dag König: http://bit.ly/RWGouo
Must have in metadata and accessible in app.
Live account
Use separate live-ID for win8 apps.
Publisher name
For company accounts, ”must” match registration papers.
Background audio
Background audio prevents suspend, do not autoplay!
Change app name
App name can be changed.
Remove app
Apps cannot be removed, only updated to no markets.
Thank you for coming!
the end
