SESSION CODE WEB 203 Tim Huckaby Founder Inter

SESSION CODE: WEB 203 Tim Huckaby Founder, Inter. Knowlogy Microsoft RD & MVP

(www. Inter. Knowlogy. com) Tim. Huck@Inter. Knowlogy. com

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

Silverlight… “WPF Light” Lightweight WPF runtime - Silverlight was designed to be a subset of WPF not a direct port XAML-based Tools <XAML> <Button Width="100 px"> OK <Button. Background> Light. Blue </Button. Background> </Button> </XAML>

or Visual Web Developer Express 2010

• Functionality • Project Structure • VS & Blend

• For pure beginner learning purposes, this reference app is better than anything you are going to find out there on the internet. • Although it does not use all the complicated and abstracted design patterns that Inter. Knowlogy would use in a commercial application, it serves perfectly as a learning tool in the form of a reference application. Bitmap. Image

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

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

Runs in a Silverlight Application: Runs in the Browser:

Declarative Programming: XAML Product. Search 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

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

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

Canvas Grid Dock. Panel Stack. Panel Border

Horizontal and Vertical Alignment Margin Text Block Margin Padding Text Block

Layout Demo Silverlight-Store. Information. 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.

Border Button Checkbox Combobox Data. Grid Image Label List. Box Radio. Button Rectangle Stack. Panel Tab. Control Text. Block Text. Box Tree. Viewbox

Mature/SDK Quality Band Stable Quality Band Preview Quality Band Experimental Quality Band • Auto. Complete. Box • Calendar • Child. Window • Data. Grid • Data. Pager • Date. Picker • Grid. Splitter • Headered. Items. Control • Tab. Control • Tree. View • Dock. Panel • Expander • Headered. Content. Control • Label • Numeric. Up. Down • Viewbox • Wrap. Panel • Accordion • Charting • Data. Form • Domain. Up. Down • Implicit. Style. Manager • Layout. Transformer • Rating • Time. Picker • Time. Up. Down • 11 Themes • Global. Calendar • Transitioning. Content. Control • Tree. Map • Drag and Drop support for items controls • Busy. Indicator

Controls Demo

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

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

Overview Simple Data Binding Complex Data Binding

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

Simple Data Binding using Business Objects Support for two-way synchronization in simple objects via the INotify. Property. Changed interface Implicit and Declarative binding via the Data. Context

Binding to Lists Supports two-way data binding to list if list inherits from Observable. Collection Data Templates Sorting Filtering Master/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

Overview Resource Dictionaries Visual 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. SL 4 supports implicit styles • Inherit from master styles Similarities to Cascading Style Sheets • Inline declaration • Page level declaration • Separate file declaration

Static Resources • Loaded when Window or Page Loads • Leads to slower page loading • Changes to underlining values are not propagated * Not supported in Silverlight 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 resources Great way to organize resources Resource. Dictionary. Merged. Dictionaries combines many different file based resources

Resource Dictionaries

Alternative to WPF Triggers in Silverlight Promotes separation between UI and code Controls have States and State Groups States within a State Group are immutable Fully 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 The Silverlight Toolkit Quality Bands • Mature, Stable, Preview, Experimental Write Once; Run Everywhere • The Windows Phone 7 resolution is 800 x 480 • The Windows Phone 7 has a rich Multi-touch API; SL does not

7

7

7 Windows Phone Hardware Common Hardware Elements 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 Quality Focus

7 Elements of the Application Platform Runtime – On “Screen” Sensors Phone Media Tools Data Xbox LIVE Location Notifications Samples Guides . NET Framework managed code sandbox Documentation Community Packaging and Verification Tools SCREEN CLOUD Phone Emulator Cloud Services Notifications Location Portal Services App Deployment Registration Marketplace Identity Feeds Validation MO and CC Billing Social Maps Certification Business Intelligence Publishing Update Management

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

http: //Silverlight. net http: //www. Microsoft. com/Silverlight http: //developer. windowsphone. com –

Laurent Bugnion Ashraf Michail Chad Campbell and John Stockton

The Inter. Knowlogy Silverlight Reference Application

The Inter. Knowlogy Multi-Touch Scatterview control for Silverlight

http: //tinyurl. com/32 jc 398 www. Inter. Knowlogy. com Tim. Huck@Inter. Knowlogy. com http: //team. interknowlogy. com/blogs/timhuckaby

SAMPLE FILL Sample Fill Sample Fill Sample Fill

Subtitle color www. microsoft. com

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