Declarative based UI programming: WPF, Silverlight & Surface

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

About…• InterKnowlogy (www.InterKnowlogy.com)• Tim Huckaby, CEO (TimHuck@InterKnowlogy.com)

● Custom Application Development / Consulting / Software & Systems Engineering Firm headquartered in Carlsbad, CA

● Design, Architect, Build and Deploy Enterprise Class Applications ● Industry Experts:

• Most of the employees are published• Microsoft .NET Application development since 2000!• Microsoft .NET Smart Client pioneers / industry leaders• Information Worker Solutions (VSTO & SharePoint)• Integration / Messaging, B2B / B2C, Wireless / Mobility • Leading Edge: Surface, WPF, Silverlight, SharePoint, OBA, Surface• Cutting Edge Solutions on emerging Microsoft technologies• Largest Client: Microsoft

Declarative Programming

Layout and Controls

Events and Commands

Working with Data

Session Agenda

Styles

4

Reference Applications Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Declarative Programming

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

Declarative Programming Gotcha(s)

• Not all XAML is created equal• Silverlight was designed to be a small

subset of WPF not a direct port• Surface works with gestures so their

versions of some controls are needed

7

Declarative Programming Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Layout Overview

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

Panels (ALL)• StackPanel

• Arranges child elements into a single line that can be oriented horizontally or vertically.

• Grid• A flexible grid area that consists of columns and

rows.• Canvas

• An area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.

Panels (WPF and Surface)

• WrapPanel• Positions child elements in sequential position from

left to right, breaking content to the next line at the edge of the containing box.

• DockPanel• An area where you can arrange child elements either

horizontally or vertically, relative to each other.

Positioning

• Horizontal and Vertical Alignment• Margin• Padding

Margin

Text Block Text Block

Padding

12

Layout Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Controls Overview

• Not all controls are created equal• Silverlight is a subset of WPF so certain

controls have not ported over yet• Surface relies on touch so it has unique

versions of some controls

Standard Common Controls

• TextBox• Button• CheckBox / ComboBox• Image• ListBox• Tab

WPF Controls

• Menu and Toolbar• TextBlock• InkCanvas / InkPresenter• Expander• TreeView• DocumentViewer• UniformGrid

Silverlight Controls

• DataGrid• Calendar• ProgressBar

Surface Controls

• ScatterView• Menu• TagVisualizer• InkCanvas

18

Controls Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Working with Data

• Overview• Simple Data Binding• Complex Data Binding

Data Binding Overview

• Simple Field level Data Binding• Complex Data Binding to multiple controls

at a time (Master/Detail/Detail)• Client-Side Sorting and Filtering• Support for binding to Objects, XML and

Relational data sources

Simple Data Binding

• 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

Complex Data Binding

• Binding to Lists• Supports two-way data binding to list if list

inherits from ObservableCollection<T>• Data Templates• Sorting• Filtering• Master/Detail/Detail

27

Working with Data Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Adding Style to Your Application

• Overview• Resources *• Triggers *

* Partial or no support in Silverlight

Styles Overview

• What are styles?• Problems they address in WinForms 2.0

● Styling controls one at a time● Unnecessary Custom Control Creation

• Similarities to Cascading Style Sheets● Inline declaration● Page level declaration● Separate file declaration

Style Examples

Resources

• 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

* Not supported in Silverlight

Resource Dictionary

• Contains hash table of resources• Great way to organize resources• Resource.MergedDictionaries combines

many different file based resources *

* Not supported in Silverlight

Triggers

• Setters that are set based on one or more conditions

• Three Types of Triggers● Property – Invoked when the value of a

dependency property changes● Data – Invoked when the value of a

plain .NET property changes● Event – Invoked when a routed event

changes

Not supported in Silverlight

The Silverlight Visual State Manager

• Alternative to 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

Not supported in WPF

35

Adding Style to Your Application

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

demo

Summary

• Layout in XAML is flexible• Each technology has it’s own set of controls• Data Binding is rich & supports many data types• Styles bring life to your applications• The learning curve can be steep, but is worth it.• Download all my resources and dedicate some

time to learn.

WPF: Where to go Next Free Resources• WindowsClient.net - this is the official Microsoft

community portal for WPF development• http://silverlight.net - this is the official Microsoft

community portal for Silverlight development• http://www.microsoft.com/surface - this is the

official Microsoft community portal for Surface

Where to go NextBooks

Windows Presentation Foundation Unleashed (WPF)

by Adam Nathan, Daniel Lehenbauer

Essential Windows Presentation Foundation (WPF)

by Chris Anderson

Silverlight In Actionby Chad Campbell and John Stockton

Where to go…soon…• Windows Presentation

Foundation A Scenario-Based Approach

by Billy Hollis

• “Early April…I hope…”B. Hollis, 12/7/07

• “October…”B. Hollis, 6/3/08

• “It’s not going to be done in April.”B. Hollis, 2/24/09

Tim Huckaby, InterKnowlogy• More info on InterKnowlogy:

● www.InterKnowlogy.com • Contact me: Tim Huckaby

● E-mail: TimHuck@InterKnowlogy.com

● Phone: 760-444-8640● Blog: http://blogs.InterKnowlogy.com/TimHuckaby

• About Tim Huckaby● CEO, InterKnowlogy● Microsoft® Regional Director – Southern California● Microsoft® .NET Partner Advisory Council Founder / Member● Microsoft® MVP - .NET● Microsoft® Surface Partner Advisory Council● INETA Speaker – International .NET Users Group Association● Windows and .NET Magazine Advisory Board Member● .NET Developers Journal Magazine Advisory Board Member● Author / Speaker