Tim Huckaby Founder, InterKnowlogy Microsoft RD & MVP SESSION CODE: WEB203

Silverlight: What is it / How to get Started Declarative Programming Layout and Controls, Events and Commands Working with Data Adding Style To Your Application

Lightweight WPF runtime - Silverlight was designed to be a subset of WPF not a direct port OK LightBlue XAML-based Tools

Functionality Project Structure VS & Blend

XAML replaces code Attributes control Layout and Style Event handlers wired-up in XAML Declarative Data Binding Declarative Programming

Separates the front-end from the back-endSimple declarative programming language suitable for constructing and initializing.NET ObjectsUsually the most concise way to represent user interfaces (or other hierarchies of objects)Doesn’t need a compile to renderThe language that almost all Silverlight related tools emit

Runs in a Silverlight Application: Runs in the Browser:

Declarative Programming: XAML ProductSearch in Silverlight

Content rendering flows inside parent Fixed positioning (Canvas) is seldom used Panels are used to house content Margins and Padding over fixed size

Arranges child elements into a single line that can be oriented horizontally or vertically. StackPanel A flexible grid area that consists of columns and rows. Grid An area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area. Canvas

Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. WrapPanel An area where you can arrange child elements either horizontally or vertically, relative to each other. DockPanel

Margin Text Block Padding Horizontal and Vertical Alignment MarginPadding

Layout Demo Silverlight-StoreInformation.xaml (in controls/store)

Not all controls are created equal Silverlight is a subset of WPF so many of the WPF controls do not exist in the core SL The Silverlight Toolkit has a number of great controls, but they exist in different bands There are plenty of good control vendors to fill the gaps.

BorderButtonCheckboxComboboxDataGrid GridImageLabelListBoxRadioButton RectangleStackPanelTabControlTextBlockTextBox TreeViewViewbox

Standard.NET Events Routed Events * Commands * Partial or no support in Silverlight

Logical action that can be invoke in several waysBased on the ICommand Interface

OverviewSimple Data BindingComplex Data Binding

Simple Field level Data Binding Complex Data Binding to multiple controls at a time (Master/Detail/Detail) Client-Side Sorting and FilteringSupport for binding to Objects

Simple Data Binding using Business Objects Support for two-way synchronization in simple objects via the INotifyPropertyChanged interface Implicit and Declarative binding via the DataContext

Binding to Lists Supports two-way data binding to list if list inherits from ObservableCollection Data TemplatesSortingFilteringMaster/Detail/Detail

Provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. Provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client A prescriptive model for exposing your domain logic over LINQ.

Working with Data Demo

OverviewResource DictionariesVisual State Manager

What are styles? Ability to associate different visual effects based on user events, Provide an entirely new looks for existing controls, Designate rendering behavior for non- visual objects. SL4 supports implicit styles Inherit from master styles Similarities to Cascading Style Sheets Inline declaration Page level declaration Separate file declaration

* Not supported in Silverlight Static Resources Loaded when Window or Page Loads Leads to slower page loading Changes to underlining values are not propagated Dynamic Resources * More overhead to allow for constant updates Can only be used to set dependency properties Can potentially improve Page and Window load time

Contains hash table of resourcesGreat way to organize resources ResourceDictionary.MergedDictionaries combines many different file based resources

Resource Dictionaries

Alternative to WPF Triggers in SilverlightPromotes separation between UI and codeControls have States and State GroupsStates within a State Group are immutableFully supported in Blend

Adding Style to Your Application with Blend

Not all XAML is created equal Silverlight was designed to be a small subset of WPF; not a direct port Mature, Stable, Preview, Experimental The Silverlight Toolkit Quality Bands The Windows Phone 7 resolution is 800x480 The Windows Phone 7 has a rich Multi-touch API; SL does not Write Once; Run Everywhere

7

7

Consistent set of hardware capabilities defined by Microsoft One resolution at launch Second resolution added later Same touch input Consistent processor / GPU Same available RAM Optional keyboard Consistent Platform Windows Phone Hardware Common Hardware Elements Quality Focus 7

CLOUD SCREEN Phone Emulator SamplesDocumentation GuidesCommunity Packaging and Verification Tools Notifications LocationIdentityFeeds MapsSocial App Deployment Registration Validation Certification Publishing Marketplace MO and CC Billing Business Intelligence Update Management Elements of the Application Platform Tools Portal ServicesCloud Services SensorsMediaData Xbox LIVENotifications.NET Framework managed code sandbox Location Phone Runtime – On “Screen” 7

“You may not be doing this now; but, you will…”Layout in XAML is flexible and elegantThe control ecosystem for SL is richData Binding in SL is rich & supports many data typesStyles bring life, usability & NUI to your applicationsThe learning curve can be steep, but is worth it.Download all my resources and dedicate some time to jump in

The InterKnowlogy Silverlight Reference Application

The InterKnowlogy Multi-Touch Scatterview control for Silverlight

SAMPLE FILL Sample Fill

Use this layout to show software code The font is Consolas, a monospace font The slide doesn’t use bullets but levels can be indented using the “Increase List Level” icon on the Home menu

Required Slide Track PMs will supply the content for this slide, which will be inserted during the final scrub.