Jump into WPF!Jump into WPF!

Tim HuckabyTim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

Level: Beginner / Intermediate

About…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, MVPs, Speakers, etc.Microsoft .NET Application development since 2000!Microsoft .NET Rich Client Pioneers / industry leadersInformation Worker Solutions (VSTO & SharePoint)Integration / Messaging, B2B / B2C, Wireless / Mobility Leading Edge: Surface, WPF, Silverlight, Win7 touch, SharePoint, VSTOCutting Edge Solutions on emerging Microsoft technologiesLargest Client: Microsoft

Session AgendaSession Agenda

Quick Demo of the Reference Application

WPF, XAML, and Declarative Programming

Layout and Controls Events and Commands Working with Data Adding Style To Your Application Summary

6

Reference Application DemoReference Application Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

•Project Structure•XAML and Code Behind•Working with Data•Resources

WPF and Declarative ProgrammingWPF and Declarative Programming

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

Sample XAMLSample XAMLRuns in a WPF Application:<Window x:Class="WpfApplication2.Window1“ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <TextBlock>Hello World</TextBlock> </Grid></Window>

Runs in the Browser:<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <TextBlock>Hello World</TextBlock> </Grid></Canvas>

Layout and ControlsLayout and Controls

Layout Basics Controls

Layout BasicsLayout Basics

Panels UI Element Positioning

PanelsPanels StackPanel

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

WrapPanelPositions child elements in sequential position from

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

DockPanelAn area where you can arrange child elements either

horizontally or vertically, relative to each other. 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.

Container ControlsContainer Controls

Canvas DockPanel DocumentViewer Frame Grid StackPanel Tab

PositioningPositioning

Horizontal and Vertical Alignment Margin Padding

Margin

Text Block Text Block

Padding

ControlsControls

Standard Common Controls Menu and Toolbar Controls Container Controls New Controls

Standard Common ControlsStandard Common Controls

TextBox Button CheckBox / ComboBox Image Label ListBox Password

Menu and Toolbar ControlsMenu and Toolbar Controls

Menu Context Menu StatusBar ToolBar ToolBarTray

Controls unique to WPFControls unique to WPF

TextBlock Expander InkCanvas InkPresenter DocumentViewer UniformGrid

18

Screen Layout DemoScreen Layout Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

Events and CommandsEvents and Commands

Standard .NET Events Routed Events Commands

Routed EventsRouted Events

Bubbling– Starts at the current element and bubbles up to

the current element’s parent and that elements parent and so on [MouseLeftButtonDown]

Tunneling– Works opposite of bubbling and starts at the

root element and works down to the originating element [PreviewMouseLeftButtonDown]

Direct– Works like standard .NET event handling with

only direct handlers being notified of events [Click]

CommandsCommands

Logical action that can be invoke in several ways

Based on the RoutedCommand Class Uses both event tunneling

[PreviewExecuteEvent] and event bubbling [ExecuteEvent]

24

Events and Commands DemoEvents and Commands Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

Working with DataWorking with Data

Overview Simple Data Binding Complex Data Binding

Data BindingData Binding

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 BindingSimple 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 BindingComplex 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

29

Working with Data DemoWorking with Data Demo

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

Adding Style to Your ApplicationAdding Style to Your Application

Overview Resources Triggers

XAML StylesXAML Styles

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 ExamplesStyle Examples

ResourcesResources

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

Resource DictionaryResource Dictionary

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

many different file based resources

TriggersTriggers

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

37

Adding Style to Your ApplicationAdding Style to Your Application

Tim HuckabyCEO, InterKnowlogyMicrosoft RD & MVP

SummarySummary

Layout in WPF is flexible WPF has a rich 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 WPF: Where to go Next Free ResourcesFree Resources

WindowsClient.net - this is the official Microsoft community portal for WPF development, and is chock full of great resources such as the...

Learn WPF page - this page links to podcasts, labs, and the very popular "how do I?" videos

MIX University's WPF Bootcamp - this is a full 3-day video training course on WPF, in which expert instructors guide you from the surface into the depths of the technology stack

Where to go NextWhere to go NextBooksBooks

Windows Presentation Foundation Unleashed (WPF)

by Adam Nathan, Daniel Lehenbauer

Essential Windows Presentation Foundation (WPF)

by Chris Anderson

Where to go NextWhere to go NextSoon…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 April 5th, 2009

Amazon

Tim Huckaby, InterKnowlogyTim Huckaby, InterKnowlogy More info on InterKnowlogy:

● www.InterKnowlogy.com Contact me: Tim Huckaby

● E-mail: TimHuck@InterKnowlogy.com

or v-TimHu@Microsoft.com● Phone: 760-444-8640● Blog: http://team.interknowlogy.com/blogs/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