building the windows 8 community app
DESCRIPTION
TRANSCRIPT
#comdaybe
Building the Windows 8 Community app
WiPhugBart Lannoeye & Glenn
Versweyveld
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