Building the windows 8 community app

#comdaybe

Building the Windows 8 Community app

WiPhugBart Lannoeye & Glenn

Versweyveld

Who are we?

Bart Lannoeye@bartlannoeyewww.bartlannoeye.be/blogGlenn Versweyveld@depechiedepblog.weblogs.us

Agenda

• The Windows 8 Community App• The basic frame of your app• Content first• Layout & branding & some good

practices• Q&A

The Win8 Community App

Why this app?

• So many communities with their events

• Windows 8 = hot topic• Idea sprung as topic for Win8

hackaton• We know XAML (as WP7 devs)• #sharingiscaring

demoWhat did we build so far

The Win8 Community App

Build your (first) Win8 app

The basics

Using MVVM (Light)

• Get the NuGet for MVVM Light• Add your ViewModel registrations in

ViewModelLocator• Set ViewModelLocator in App.xaml• Bind View DataContext to your

ViewModel

Content firstData is the start of everything

Complex (cyclic) data model

Usergroup

Event

Session

SpeakerLocation*

*

* *

*

**

1

1

*

Our approach on data

• Lazy loading–Base object contains enough for

tiles–Full object for the detail page

• REST Api

demoWalking through the REST API

The data behind our app

Consuming the REST API

• Async !• Consider an extended

splashscreen• Lazy loading? Careful with

references !• Json.net vs built-in Json library

demoConsuming the REST Api

The data behind our app

Build your (first) Win8 app

Styling & branding

Styling & branding

• Personalize your app !• Use VS app template• There will be a Common folder

with StandardStyles.xaml• We derived our own from those

StandardStyles

demoBing Maps

Styling, branding & practices

Bing Maps

• Install Bing Maps SDK for Metro• Get a Bing Maps key & put it in

App.xaml• Add references• Choose a Platform!–ARM, x86 or x64 > Not Any CPU

demoImage manipulation

Styling, branding & practices

Image manipulation

• Get WriteableBitmapEx lib• Use FromStream method to get

image from Url• Use Blit method for image

manipulation• Remark – Blue shade in current

release

demoFlyout control

Styling, branding & practices

Flyout in XAML

Flyout in XAML

• Get Callisto library• Add event to a control to trigger

Flyout• In code set Placement where you

need it on the page• Add controls you like

Build your (first) Win8 app

Some good practices

Integrate with charms

• Windows 8 provides charms, use them

• Share contract• Search contract• Settings

Share charms

• ShareManager class– Initialize in code behind of view– Initialize in ViewModel

• ShareDate class–Use to share content given from

ViewModel

demoShare contract

Styling, branding & practices

Use resources

• Localization (worldwide market)• Leverage resources for scaling• XAML binding to resources

demoResources

Styling, branding & practices

Takeaways

• Content = Chrome !• Style & brand your app• Stick to the Design guidlines• Integrate with the Charms• Have fun !

Resources• Bing Maps

– http://visualstudiogallery.msdn.microsoft.com/0c341dfb-4584-4738-949c-daf55b82df58/

– http://msdn.microsoft.com/en-us/library/ff428642.aspx ( How to get a Bing Maps key )

– http://www.bingmapsportal.com/– http://social.msdn.microsoft.com/Forums/en-US/category/bingmaps

• WriteableBitmapEx– http://writeablebitmapex.codeplex.com

• Callisto– https://github.com/timheuer/callisto

Q&A

Thank you!Building the Windows 8 Community app