Windows Store apps

lessons learned

@andyhammar - andreas.hammar@jayway.com

@chribben - christian.jacobsen@jayway.com

Windows StoreView states

Store

What we’ve done

Navigation

Blend

Touch

What we’ve done

Blend

Design time data

View model Design time view model AppBar binding

View model

Design time view model

AppBar binding

View states

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.

…maintain state, context, and interactivity

What?

Full screen

Filled

Snapped

How?

Design time – define visual states

or

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

Tips

//When snapped visual state is static, use a page if (ApplicationView.Value == ApplicationViewState.Snapped) Frame.Navigate(typeof (MySnappyPage));

Tips

var snappedLeft = ApplicationView.Value ==

ApplicationViewState.Snapped && Window.Current.Bounds.Left == 0;

Gotcha

Tips

Navigation

App anatomy

Application

Window

Frame

Page

Fundamental navigation

//Plain navigationFrame.Navigate(typeof (MySuperDuperPage));

//Parameter passingFrame.Navigate(typeof (DisplayItemPage), itemId);

Fundamental navigation

protected override void OnNavigatedTo(NavigationEventArgs e){ int itemId = (int) e.Parameter; _myViewModel.SelectedItemId = itemId;

.

.

.}

Fundamental navigation

Frame.CanGoBackFrame.GoBack()Frame.CanGoForwardFrame.GoForward()

Frame.Navigated Frame.NavigatingFrame.NavigationFailedFrame.NavigationStopped

Helpers

State

SessionState

FrameState

FrameState

…

NavigationState

PageStatePageStatePageState

NavigationState

PageStatePageStatePageState

App

TipsUse a background frame for stuff that must survive page switching

Background Frame

Frame

Page

Background Page

Tips

Use caching for improved navigation performance

Gotcha

Parameter passing – you can pass any object….

BUT

The platform only support serializing of basic types

Summary

Rootframe Navigate with simple parameters Use caching if app with many pages

Touch

Pointer events

PointerPressed, PointerReleased, PointerMoved

PointerCanceled, PointerCaptureLost, PointerEntered, PointerExited, 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

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

Get started – Store

• Create Microsoft account• Create Store account• Reserve app name

Thank you for coming!

the end