Designing and Developing a Windows Phone 7 Application in Silverlight End-to-End

Isabel Gomez MiragayaDeveloper EvangelistMicrosoft Spain

Katrien De GraeveDeveloper EvangelistMicrosoft BeLux

Contents

• Seeing it all come together• Cloud service and SQL Azure• OData• MVVM• Using Expression Blend for UI• Phone integration• Location services• Choosers & Launchers• Application Bar• Page Navigation

• Databinding• Custom user controls

CLOUD

SCREEN

Phone Emulator

Samples Documentation

Guides Community

Packaging and Verification Tools

Notifications

Location Identity Feeds

MapsSocial

App Deployment Registration

Validation

Certification

Publishing

Marketplace

MO and CC Billing

Business Intelligence

Update Management

Elements of the Windows Phone 7 Application Platform

Tools

Portal ServicesCloud Services

Sensors Media Data

Xbox LIVE Notifications

.NET Framework managed code sandbox

Location

Phone

Runtime – On “Screen”

Outloud Architecture

Screen

The Cloud

Opinion

WiFi

MVVM

…

Outloud Pictures

Push Notification: New Opinion

OutloudoData

SA Storage

AggregatedOpinion

DEMOCloud: Outloud ServicesClient: Outloud Model

MVVM > The Model

Opinion

id

mood

name

latitude

longitude

description

dser

pictureURL

AggregatedOpinion

name

numberofopinions

averagemood

UI Guidelines and controls

• Panorama style applications• Pivot style applications

MVVM – Main page (Pivot)

Model

AggregatedOpinion

MainPage

Pivot

all

nearby

Appbar

OpinionsViewModel

bool IsDataLocationLoaded

NearBy

All

PropertyChanged

GeoCoordinateWatcher(via GPS Helper)

MVVM –Submit opinion control

Model

Opinion

SubmitOpinionViewModel

TakePicture (RelayCommand-MVVMLight)

NewOpinion

ChosenPicture

CurrentGeoCoordinate

IsSubmitting

SubmitOpinion(RelayCommand-MVVMLight)

CancelOpinion(RelayCommand-MVVMLight)

SubmitOpinion

Submit (control)

Step 1

Step 2

Step 3

Step 4

MoodSelector(control)

ButtonTakePicture

Send

Cancel

…….. BoolVisibilityConverter

EventToCommand

EventToCommand

EventToCommand

DEMOMain page and a user control

MVVM – Main page and Submit opinion

SubmitOpinion

MainPage

OutloudoDataclient

AggregatedOpinion

OpinionsViewModel

SubmitOpinionViewModel

RelayCommand (MVVMLight ICommand)

EventToCommand (MVVMLight behavior)

Opinion

Location with GeoCoordinateWatcher

PivotAppBar

MVVM Design data

Model

AggregatedOpinion

OpinionsViewModel

AllOpinionsViewModel

AllAggregatedOpinions

IsDataLoading

NearByOpinionsViewModel

NearByAggregatedOpinions

IsDataLoading

BoolToVisbility

MainPage

Pivot

all

nearby

……..

…….. BoolToVisbility

DEMODesign Data

MVVM Getting Real Data

Model

AggregatedOpinion

OpinionsViewModel

AllOpinionsViewModel

AllAggregatedOpinions

IsDataLoaded

NearByOpinionsViewModel

NearByAggregatedOpinions

IsDataLoaded

BoolToVisbility

MainPage

Pivot

all

nearby

……..

…….. BoolToVisbility

OutloudoData

SA Storage

AggregatedOpinions

GetNearByOpinions

Navigating master-detail

MVVM Master-Detail View

Model

AggregatedOpinion

OpinionsViewModel

AllOpinionsViewModel

SelectedAggregatedOpinion

NearByOpinionsViewModel

SelectedAggregatedOpinion

SelectedItem

MainPage

Pivot

all

nearby SelectedItem

WP7ContribLastReplayMessenger<Selected AggOpinion>

AggregatedOpinion

NameAverageMood

List of Opinions

AggregatedOpinionVM

AggregatedOpinion

IsDataLoading…….. BoolToVisbility

SelectionChanged

OutloudoData

SA Storage

DEMOReal data and navigation

Tombstoning

• PhoneApplicationPage.State• PhoneApplicationService.State• App events• Application_Launching• Application_Activated• Application_Deactivated• Application_Closing

MVVM - CameraTask, Tombstoning and save real data

Model

Opinion

SubmitOpinionViewModel

TakePicture (RelayCommand-MVVMLight)

NewOpinion

ChosenPicture

CurrentGeoCoordinate

IsSubmitting

SubmitOpinion(RelayCommand-MVVMLight)

CancelOpinion(RelayCommand-MVVMLight)

SubmitOpinion

Submit (control)

Step 1

Step 2

Step 3

Step 4

MoodSelector(control)

ButtonTakePicture

Send

Cancel

…….. BoolVisibilityConverter

EventToCommand

EventToCommand

EventToCommand

Tombstone

OutloudoData

SA Storage

DEMOCamera integration and tombstoningSaving real data

MVVM - CameraTask, Tombstoning and save real data

Model

Opinion

SubmitOpinionViewModel

TakePicture (RelayCommand-MVVMLight)

NewOpinion

ChosenPicture

CurrentGeoCoordinate

IsSubmitting

SubmitOpinion(RelayCommand-MVVMLight)

CancelOpinion(RelayCommand-MVVMLight)

SubmitOpinion

Submit (control)

Step 1

Step 2

Step 3

Step 4

MoodSelector(control)

ButtonTakePicture

Send

Cancel

……..

BoolVisibilityConverter

EventToCommand

EventToCommand

EventToCommand

Tombstone

OutloudoData

SA Storage

Push Notification

Model

Opinion

OpinionsViewModelMainPage

Pivot

«Hotel A»

NewOpinionArrived

Callback (Opinion)

New Opinion

OutloudoData

Register for NotificationsSubscribe to Notifications

PropertyChangedRaw/Tile/Toast

DEMOout.loud Push Notification

Recap Push Notification

Model

Opinion

OpinionsViewModelMainPage

Pivot

«Hotel A»

NewOpinionArrived

Callback (Opinion)

New Opinion

OutloudoData

Register for NotificationsSubscribe to Notifications

PropertyChangedRaw/Tile/Toast

WHAT’S MISSING?

Possible improvements for demo

• Categories of opinions• Subscribing to categories for push notification• Settings page for push notification• Saving state for current opinions• Orientation support• Integration with authentication & membership• Integration with Twitter• Error handling • ...

Tips, Tricks and Lessons Learned

• Using behaviors and create your own• Create design time data• Application execution lifecycle and tombstoning• Accessing location consumes battery: store location• CameraCaptureTask and testing on device: WPConnect tool• Push notification, for raw notification make sure to notifiy user

visually

How things will be easier with “Mango”

• Tooling• Visual Studio tooling for Location• Profiler

• Tombstoning changes• Silverlight 4• Tile improvements for resetting tile• Tile and toast deep linking to a detailed opinion• Performance improvements

• More at http://live.visitmix.com

Resources

• Windows Phone Training Kit• http://www.microsoft.com/downloads/en/details.aspx?

displaylang=en&FamilyID=ca23285f-bab8-47fa-b364-11553e076a9a

• Windows Azure Toolkit for Windows Phone 7• http://watoolkitwp7.codeplex.com

• OData for Windows Phone• http://odata.codeplex.com/releases/view/54698

• WP7 Contrib• http://wp7contrib.codeplex.com/

• MVVM Light• http://mvvmlight.codeplex.com/

Stay up to date with MSDN Belux

• Register for our newsletters and stay up to date:http://www.msdn-newsletters.be• Technical updates• Event announcements and registration• Top downloads

• Follow our bloghttp://blogs.msdn.com/belux

• Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux

• LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux

Download MSDN/TechNet Desktop Gadget

http://bit.ly/msdntngadget

TechDays 2011 On-Demand

• Watch this session on-demand via Channel9http://channel9.msdn.com/belux

• Download to your favorite MP3 or video player• Get access to slides and recommended resources by the speakers

THANK YOU