Windows Store appslessons learned@andyhammar - andreas.hammar@jayway.com@chribben - christian.jacobsen@jayway.com
Windows StoreView statesStoreWhat we’ve doneNavigationBlendTouch
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’sfunctions must be fully accessible when theapp’...
…maintain state, context, and interactivity
What?Full screenFilledSnapped
How?Design time – define visual statesor
How?Run time – apply correct visual stateWindow.Current.SizeChanged += SizeChanged;...private void SizeChanged(object sndr...
Tips//When snapped visual state is static, use a pageif (ApplicationView.Value == ApplicationViewState.Snapped)Frame.Navig...
Tipsvar snappedLeft =ApplicationView.Value == ApplicationViewState.Snapped &&Window.Current.Bounds.Left == 0;
Gotcha
Tips
Navigation
App anatomyApplicationWindowFramePage
Fundamental navigation//Plain navigationFrame.Navigate(typeof (MySuperDuperPage));//Parameter passingFrame.Navigate(typeof...
Fundamental navigationprotected override void OnNavigatedTo(NavigationEventArgs e){int itemId = (int) e.Parameter;_myViewM...
Fundamental navigationFrame.CanGoBackFrame.GoBack()Frame.CanGoForwardFrame.GoForward()Frame.NavigatedFrame.NavigatingFrame...
Helpers
StateSessionStateFrameStateFrameState…NavigationStatePageStatePageStatePageStateNavigationStatePageStatePageStatePageState...
TipsUse a background frame for stuff that must survive page switchingBackground FrameFramePageBackground Page
TipsUse caching for improved navigation performance
GotchaParameter passing – you can pass any object….BUTThe platform only support serializing of basic types
Summary Rootframe Navigate with simple parameters Use caching if app with many pages
Touch
Pointer eventsPointerPressed, PointerReleased,PointerMovedPointerCanceled, PointerCaptureLost, PointerEntered,PointerExite...
Pointer events• e.GetCurrentPoint().PointerId.Properties.IsMiddleButtonPressed• e.GetIntermediatePoints
Static gestures• Derived from Pointer-events Tapped DoubleTapped Holding RightTapped• One concurrent event per UI Elem...
Manipulation gesture eventsManipulationStarted, ManipulationCompletedManipulationDelta,ManipulationInertiaStarting, Manipu...
Manipulation gesture events• Inertia• Often used to set RenderTransform• Derived from Pointer-events• One concurrent event...
Brainstormer
Screen table - "Surface"/FlatFrog no up or down difficult with global UI elementsUse 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 ...
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 Rem...
WACKIs step 1 of certification process  always run this.
Privacy policyBlog post by Dag König: http://bit.ly/RWGouoMust have in metadata and accessible in app.
Live accountUse separate live-ID for win8 apps.
Publisher nameFor company accounts, ”must” match registration papers.
Background audioBackground audio prevents suspend, do not autoplay!
Change app nameApp name can be changed.
Remove appApps 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
Upcoming SlideShare
Loading in...5
×

Windows Store apps - Lessons Learned

616

Published on

Presentation about building Windows Store apps in C#/XAML. By Andreas Hammar and Christian Jacobsen

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
616
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • WeareconsultantswithJayway
  • This is what we’ll talk about.appsconceptsstore
  • First some context on whatwe’vedoneDemo:ReseguidenRixFM och BanditLänsförsäkringarRicoh
  • Howmanyareused to workingwith Blend?The Blend code has beenmergedinto VS.But Blend still has someadvantages,one is workingwithresources.
  • Design and UI is reallyimportant for Windows 8 apps.Important to be able to workwith design fluently.Unlike WP and earlier XAML versions, the Data tab in Blend is missing  cannot use XML data for view models.
  • What we like to do is:In code, set view model in ctorviewModel.Init in OnNavigatedToDataContext is inherited to child elements
  • What we like to do is:Design view model on pageInherits from real VM – sets data as needed in design time
  • Appbar inherits binding from ancestors.If a separate DataContext is needed, it cannot be set on the AppBar itself, will not apply.
  • Krav för godkännande…sanning med modifikation
  • Demo
  • Bakom gardinerna…För den här kontrollen ska vänstermarginalen vara 10 isf 20. För den här kollektionen vill jag använda en listview isf gridview.
  • Bakom gardinerna…
  • Simulator doesn’t care about manifest settings concerning rotation
  • Rememberthat in fillview the usermighthave a hard timereachingwithboththumbs
  • The anatomyof an appNavigation functionality in the Frameclass
  • An app stores itsstate in a dictionaryheld by the suspension manager helperclassprovided by VS. What has this to do with navigation? Whenresuming from terminatedstate, wewant to restore page navigation state
  • Alsousefulifyouwant to save filled in user data during navigation (not necessaryifsavingstate in SaveStatemethod)
  • Just works.Have to learnmoredetails forGamesCustomcontrols
  • No separate events for mouse, pen, touch – all the same.Raw events areavailable – buteasier APIs exist (gestures).
  • Trackeachindividual fingerCode for mouse-specificEvent-history
  • Straightforward
  • Gestures like zoom, rotation and movement
  • Also supportsinertia – like slowing downWorks beautifullywithrender transform
  • Demo-app for FlatFrogsurface table
  • New problems compared to regularscreenNo up or downEveryoneshould be able to reacheverytningDuplicate elements
  • Problems withonestaticgesture eventPointerPressed – manypopups (hand on table)Hold – onlyone at a timeDoubleClick – betterTrick: grid inside canvas – to capturerouted events and route to canvasAllowedmultipleconcurrent events
  • Hard to get transform rightBest result:Usecomposite transform and Cumulativevalues from manipulationRepeatButtondoes not handleconcurrentusages
  • Show windows store liveCreateapp – reservename
  • Great tool, checks all kinds of things.Leave machine alone while it runs!Probably runs as step 1 of the certification process  you have to pass. (we’ll get back to that...)
  • Talked about a lot, majority of rejects was this error.Must provide – both in app and in metadata (=on the web)Privacy policy: http://bit.ly/RWGouoPublish an app: http://bit.ly/R28Rtj
  • Everything done via live account.Often you publish as a customer – tell them to create a separate live account and forward the email.Really tedious to have to ask for confirmation codes and have them (not) tell you when an email has arrived.Clicking ’remember me’ saves you a lot of hassle.Checklist:Create accountReserveappname
  • Company: must be identical to papers.Abbreviations cause delays.E.g. MTG Radio ABWe have always gone for age 12+, to be on the safe side.E.g. radio streams could contain anything...
  • Not agent like windows phone, but an element in the app that prevents suspend = the app continues to run.But... The WACK does not understand this. We had to disable autoplay for MTG Apps
  • Can be done.Reserve new nameChange name everywhere in appPublish updateOld name can now be removed
  • Apps cannot be removed!What you can do is to publish an update that is not available in any countries!Will cause the app to disappear from the Store, but get an update on the machines that it has been installed on.You can never force-delete an app on all machines that it’s installed on.
  • Windows Store apps - Lessons Learned

    1. 1. Windows Store appslessons learned@andyhammar - andreas.hammar@jayway.com@chribben - christian.jacobsen@jayway.com
    2. 2. Windows StoreView statesStoreWhat we’ve doneNavigationBlendTouch
    3. 3. What we’ve done
    4. 4. Blend
    5. 5. Design time data View model Design time view model AppBar binding
    6. 6. View model
    7. 7. Design time view model
    8. 8. AppBar binding
    9. 9. View states
    10. 10. Your app must support a snapped layout.In landscape orientation, your app’sfunctions must be fully accessible when theapp’s display size is 1024 x 768. Your appmust remain functional when the customersnaps and unsnaps the app.
    11. 11. …maintain state, context, and interactivity
    12. 12. What?Full screenFilledSnapped
    13. 13. How?Design time – define visual statesor
    14. 14. How?Run time – apply correct visual stateWindow.Current.SizeChanged += SizeChanged;...private void SizeChanged(object sndr, WindowSizeChangedEventArgs e){var viewState = ApplicationView.Value;VisualStateManager.GoToState(this, viewState.ToString(), false);}
    15. 15. Tips//When snapped visual state is static, use a pageif (ApplicationView.Value == ApplicationViewState.Snapped)Frame.Navigate(typeof (MySnappyPage));
    16. 16. Tipsvar snappedLeft =ApplicationView.Value == ApplicationViewState.Snapped &&Window.Current.Bounds.Left == 0;
    17. 17. Gotcha
    18. 18. Tips
    19. 19. Navigation
    20. 20. App anatomyApplicationWindowFramePage
    21. 21. Fundamental navigation//Plain navigationFrame.Navigate(typeof (MySuperDuperPage));//Parameter passingFrame.Navigate(typeof (DisplayItemPage), itemId);
    22. 22. Fundamental navigationprotected override void OnNavigatedTo(NavigationEventArgs e){int itemId = (int) e.Parameter;_myViewModel.SelectedItemId = itemId;...}
    23. 23. Fundamental navigationFrame.CanGoBackFrame.GoBack()Frame.CanGoForwardFrame.GoForward()Frame.NavigatedFrame.NavigatingFrame.NavigationFailedFrame.NavigationStopped
    24. 24. Helpers
    25. 25. StateSessionStateFrameStateFrameState…NavigationStatePageStatePageStatePageStateNavigationStatePageStatePageStatePageStateApp
    26. 26. TipsUse a background frame for stuff that must survive page switchingBackground FrameFramePageBackground Page
    27. 27. TipsUse caching for improved navigation performance
    28. 28. GotchaParameter passing – you can pass any object….BUTThe platform only support serializing of basic types
    29. 29. Summary Rootframe Navigate with simple parameters Use caching if app with many pages
    30. 30. Touch
    31. 31. Pointer eventsPointerPressed, PointerReleased,PointerMovedPointerCanceled, PointerCaptureLost, PointerEntered,PointerExited, PointerWheelChanged
    32. 32. Pointer events• e.GetCurrentPoint().PointerId.Properties.IsMiddleButtonPressed• e.GetIntermediatePoints
    33. 33. Static gestures• Derived from Pointer-events Tapped DoubleTapped Holding RightTapped• One concurrent event per UI Element
    34. 34. Manipulation gesture eventsManipulationStarted, ManipulationCompletedManipulationDelta,ManipulationInertiaStarting, ManipulationStarting
    35. 35. Manipulation gesture events• Inertia• Often used to set RenderTransform• Derived from Pointer-events• One concurrent event per UI Element
    36. 36. Brainstormer
    37. 37. Screen table - "Surface"/FlatFrog no up or down difficult with global UI elementsUse popups or duplicates
    38. 38. 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 insidethe canvas (Routed events)
    39. 39. Manipulation transforms CompositeTransform e.Cumulative.Rotation No concurrent Repeatbuttons e.handled = true
    40. 40. Windows Store
    41. 41. Windows Store Publish WACK Privacy policy Live account Publisher name Background audio Manage Change app name Remove app
    42. 42. WACKIs step 1 of certification process  always run this.
    43. 43. Privacy policyBlog post by Dag König: http://bit.ly/RWGouoMust have in metadata and accessible in app.
    44. 44. Live accountUse separate live-ID for win8 apps.
    45. 45. Publisher nameFor company accounts, ”must” match registration papers.
    46. 46. Background audioBackground audio prevents suspend, do not autoplay!
    47. 47. Change app nameApp name can be changed.
    48. 48. Remove appApps cannot be removed, only updated to no markets.
    49. 49. Get started – Store• Create Microsoft account• Create Store account• Reserve app name
    50. 50. Thank you for coming!the end
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×