Building Silverlight

Applications

Jason LeeEthos Technologies

Agenda• Windows Phone 7 Platform Overview• Silverlight & XNA• Silverlight on Windows Phone 7• Development Tools• XAML• Play Time• DataBinding• MVVM• Q & A

WP7 Platform Overview

Common Base Class LibraryI/O, Text, Collections, Net, LINQ etc.

Windows Phone 7 FrameworkSensors, Camera, Launchers & Choosers, Push Notifications etc.

SilverlightControls, Drawing, Navigation etc.

XNAInput, Content, Graphics, Audio etc.

Silverlight & XNA• When to choose Silverlight

• Comfort with XAML, event-driven application development• Vector Graphic• Rapid creation of a Rich Internet Application-style UI• Built-in controls• Embed video as part of screen

• When to choose XNA• High-performance game• 3D • Familiar with Direct3D or even OpenGL

• Or… both• Possible to combine both Silverlight and XNA in Mango release.

Silverlight on WP7• Based On Silverlight 4

• Applications hosted on client device, not in browser.• Most features are Included :

- Implicit Styles - DataBinding Enhancements- Icommand Support

• Some are NOT Included : - Printing, MouseWheel - Right-Click- Drag and Drop

• Phone Specific Additions• Gestures / Touch• Tasks (Phone Call, SMS, Email, Camera, etc.)• Performance Optimization

Development Tools• Visual Studio

• Great tool for coding, debugging, publishing• Only C# is supported for phone development• Can do some simple layout design

• Expression Blend• Great tool for design• Has some overlap with Visual Studio

• Principles• Even if you are so called “coding guy”, don’t be political, use them both,

use them well.

Introduction to XAML• XAML is

• Extensible Application Markup Language.• Describing UI in the form of XML.• Used in WPF and Silverlight UI composition.• Everything done in XAML, can be done in C#.

• Features• XML structure is ideal for describing hierarchical, nested Visual Tree.• Much more easier than C# to define/declare UI Elements, Templates,

Styles, DataBindings.

• Principle• UI related work goes to XAML, controlling work goes to C#.• For ambiguous situations, try them both and pick up the one you like.

Example of XAML

Phone Page

Grid

Don’t

Sleep

StackPanel

1

23

4 5

Play Time !• Goals

• Get familiar with development tools and project structure• Get familiar with basic controls• See it in action, get excited

Key Points• Theme Aware

• Two themes : Dark & Light• A number of Accent Colors• Thus, try NOT use specific color and font, use predefined resources

instead.

• Careful with Sizing• Phone resolution may defer, that’s why we need Auto-Size.• Auto-Size is great, but costs performance.• Thus, try NOT use too much Auto-Size, especially for hierarchical

structure.

• Appropriate Keyboard• Phone is small, we can’t show everything.• Show optimum keyboard to make users happy.• InputScope is what you want to look into.

DataBinding• What is DataBinding

• DataBinding is glue that joins presentation code(View) with controlling logic code(ViewModel) at runtime.

• Make it possible to loose couple presentation layer and logic layer.

• DataBinding Modes• Three different binding modes: OneTime, OneWay, TwoWay

• Fundamental APIs• INotifyPropertyChanged • DependencyProperty

Presentation

Code BehindProperty

Why DataBinding ?• The world before DataBinding was a mess

• Tight coupling between Presentation and Logic code.

TextBox Get Data Set TextBox.Text = OriginalValue OnTextBox_TextChanged => Do Something ChnagedValue = TextBox.Text Save Data

TextBoxTextBoxGet DataSave Data

CLR ObjectBinding Source

Dependency ObjectBinding Target

DataBinding Explained

PropertyDependency Property

Binding Object

DataBinding Modes

PersonTextBox

FirstNameTextOneTime

PersonTextBox

FirstNameText

PersonTextBox

FirstNameText

OneWay

TwoWay

INotifyPropertyChanged

DataBinding in XAML (1)• Defining Singular Data Source

• Set DataContext property of any UI Element • If the UI Element is a container control, all its containing sub-UI Elements

inherit the same data source.

Grid

StackPanelTextBox2

TextBox1

TextBox3

Person

MidName

FirstName

LastName

DataContext=“{Binding Person}”

Text=“{Binding FirstName}”

Text=“{Binding MidName}”

Text=“{Binding LastName}”

DataBinding in XAML (2)• Defining Collection Data Source

• Set ItemsSource property of list control (parent control). • List control generates a number of child-elements, applying each child’s

DataContext with corresponding data source.• The look of each child is defined by parent control’s ItemTemplate.

ListBox

ListBoxItem

ListBoxItem

People

Person 2

Person 1

Person 3

ItemsSource=“{Binding People}”

Person 2

Person 3

ListBoxItem Person 1

Commanding• So far so good for property binding, how about event/method then?

• We need a way to combine UI element’s event and corresponding method

• Binding between event and method• Command binding is done through ICommand interface.• One common practice is DelegateCommand Implementation.

MVVM• MVVM Design Pattern

• Model-View-ViewModel• An alternative approach for MVC design pattern• Specially suitable for WPF/Silverlight

• Advantages• Separation of concern • Reusability• Testability

• Approaches• View First, ViewModel First

• Principle• Design pattern is just a guideline for most common cases, you don’t have

to do everything by applying it. • Remember, simple is the best!

MVVM Explained

ViewViewModel

Method

Albums

Selected Album

Tracks

Button

Albums

Songs

Call Service

Call Service

Data Binding

Page & Navigation• A phone page

• Derives from PhoneApplicationPage class• Has a Title property• Optionally contains and shows ApplicationBar

• Navigation• Silverlight on Windows Phone uses a Page-based navigation model • Similar to web page navigation model• Pages are identified by a unique URI

• Key APIs• NavigationService.Navigate(Uri source)• NavigationService.GoBack()• Virtual void OnNavigatedFrom(NavigationEventArgs e)• Virtual void OnNavigatedTo(NavigationEventArgs e)

Navigating Back• Pay attention to Back key

• The built in hardware Back key is used to navigate back to previous page• No code required to navigate back

• To prevent navigating back

Navigation & Parameter• To pass parameters

• To receive parameters

! & ?

Thank You ! Any Questions ?