WPF Demystified Chris Koenig Developer Evangelist [email_address] http://blogs.msdn.com/chkoenig

Upcoming Events October 9-10 – Tulsa TechFest 20-22 – in.Telligent Conference November 4 – Election Day (Rock the Vote!) 14 – Dallas Agile.NET Conference 18-20 – MSDN TechDays (Dallas) December 8-10 – VSLive! Dallas January 16-18 – We Are Microsoft

October

9-10 – Tulsa TechFest

20-22 – in.Telligent Conference

November

4 – Election Day (Rock the Vote!)

14 – Dallas Agile.NET Conference

18-20 – MSDN TechDays (Dallas)

December

8-10 – VSLive! Dallas

January

16-18 – We Are Microsoft

We Are Microsoft / GiveCamp Volunteer event Building web applications for local-area charities & non-profits January 16-18 at BravoTECH Very rewarding experience! http://www.wearemicrosoft.com http://www.givecamp.org

Volunteer event

Building web applications for local-area charities & non-profits

January 16-18 at BravoTECH

Very rewarding experience!

http://www.wearemicrosoft.com

http://www.givecamp.org

What Will We Cover? Essential concepts of Windows Presentation Foundation How to create a data-bound, service based WPF application

Essential concepts of Windows Presentation Foundation

How to create a data-bound, service based WPF application

Helpful Experience User Interface development .NET language VB C# Familiar with XML Visual Studio 2008 Level 100

User Interface development

.NET language

VB

C#

Familiar with XML

Visual Studio 2008

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

WPF Advantages Composable Elements Flexible layout engine Powerful data-binding architecture Impressive print, font and document capabilities

Composable Elements

Flexible layout engine

Powerful data-binding architecture

Impressive print, font and document capabilities

WPF Advantages Lookless controls Styles and Templates Full integration of all UI disciplines

Lookless controls

Styles and Templates

Full integration of all UI disciplines

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

WPF Applications Create WPF application with Visual Studio 2008 Expression Blend A WPF application is managed code It runs on the .NET 2.0 runtime Some classes similar to the WinForms model Application class Has Window class instead of Form class Use .Show() or .ShowDialog() to display Page class for forward/back navigation Host WinForms controls on WPF windows Host WPF controls on Winform forms

Create WPF application with

Visual Studio 2008

Expression Blend

A WPF application is managed code

It runs on the .NET 2.0 runtime

Some classes similar to the WinForms model

Application class

Has Window class instead of Form class

Use .Show() or .ShowDialog() to display

Page class for forward/back navigation

Host WinForms controls on WPF windows

Host WPF controls on Winform forms

Creating WPF application in Visual Studio 2008

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

XAML XAML is a declarative programming language Tool friendly: Easy to persist UI structure in XAML Expression Blend, ZAM 3D, Visual Studio XAML is parsed by dedicated parser Parser converts the tree of XML into a instances of objects Most .NET types can be stored in XAML tree Most likely that these will be Visual items WPF, WF, Silverlight & XPS use XAML Silverlight XAML is a sub-set of WPF XAML

XAML is a declarative programming language

Tool friendly: Easy to persist UI structure in XAML

Expression Blend, ZAM 3D, Visual Studio

XAML is parsed by dedicated parser

Parser converts the tree of XML into a instances of objects

Most .NET types can be stored in XAML tree

Most likely that these will be Visual items

WPF, WF, Silverlight & XPS use XAML

Silverlight XAML is a sub-set of WPF XAML

XAML

XAML

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Layout WPF includes a flexible, panel based layout engine What is layout? Measuring and arranging a region of WPF UI All layout is handled by panels Panel has ultimate control over every child Child size, location, ZOrder Child location relative to other children Frees you from hard coding sizes/locations Mix and combine panels

WPF includes a flexible, panel based layout engine

What is layout?

Measuring and arranging a region of WPF UI

All layout is handled by panels

Panel has ultimate control over every child

Child size, location, ZOrder

Child location relative to other children

Frees you from hard coding sizes/locations

Mix and combine panels

Layout Child communicates with host panel via Attached properties Inform their containing panel of desired layout Example: Grid.Column = "3" Each panel handles one type of layout Canvas: Absolute positioning StackPanel: Children stacked horizontal/vertical WrapPanel: Stacked, with multi children per line DockPanel: Attach child to side of panel Grid: Create rows/columns for children Panel model is extensible with your own panels

Child communicates with host panel via Attached properties

Inform their containing panel of desired layout

Example: Grid.Column = "3"

Each panel handles one type of layout

Canvas: Absolute positioning

StackPanel: Children stacked horizontal/vertical

WrapPanel: Stacked, with multi children per line

DockPanel: Attach child to side of panel

Grid: Create rows/columns for children

Panel model is extensible with your own panels

Layout

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Styles Styles provide a convenient way to itemize a set of property values for an element type Example: Set font attributes for all textboxes To define a Style Styles are defined in a Resource element Any element in XAML can have a resource section Usual locations are Page, Window and Application level Named styles have a x:Key value Use TargetType to limit style to one element type

Styles provide a convenient way to itemize a set of property values for an element type

Example: Set font attributes for all textboxes

To define a Style

Styles are defined in a Resource element

Any element in XAML can have a resource section

Usual locations are Page, Window and Application level

Named styles have a x:Key value

Use TargetType to limit style to one element type

Styles To apply a Style to an Element Reference the Style by setting the Style attribute Use the Markup Extension syntax '{}'

To apply a Style to an Element

Reference the Style by setting the Style attribute

Use the Markup Extension syntax '{}'

Styles

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Using Services and DBs Accessing data from WPF XML LINQ LINQ to Objects LINQ to SQL LINQ to XML LINQ to [your provider goes here] ADO.NET Entity Framework Invoking Services from WPF WCF SOAP, REST, WS-*

Accessing data from WPF

XML

LINQ

LINQ to Objects

LINQ to SQL

LINQ to XML

LINQ to [your provider goes here]

ADO.NET

Entity Framework

Invoking Services from WPF

WCF

SOAP, REST, WS-*

Using Services and DBs ADO.NET Data Service Code name “Astoria” Exposes SQL data over HTTP via REST endpoints Examples: http://localhost/CohoDS.svc/Wines … Northwind.svc/Customers?$filter=contains(City,'Kent') Authoring the Data Service Website ADO.NET Entity Data Model ADO.NET Data Service Consuming the DataService Generate proxy with DataSvcUtil.exe Use “Add Service Reference”

ADO.NET Data Service

Code name “Astoria”

Exposes SQL data over HTTP via REST endpoints

Examples: http://localhost/CohoDS.svc/Wines

… Northwind.svc/Customers?$filter=contains(City,'Kent')

Authoring the Data Service

Website

ADO.NET Entity Data Model

ADO.NET Data Service

Consuming the DataService

Generate proxy with DataSvcUtil.exe

Use “Add Service Reference”

Astoria Data Services

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Data Binding Binding overview WPF synchronizes a data source and data target Add binding to target element with {Binding ***} Change notification WPF dependency system updates target upon source changes provided: Source must implement IPropertyNotifyChanged Single binding Bind a target to a single property on source Example: TextBlock.Text to Customer.Age List binding Bind a target to a array, collection etc. Example: Treeview.ItemsSource to Collection object

Binding overview

WPF synchronizes a data source and data target

Add binding to target element with {Binding ***}

Change notification

WPF dependency system updates target upon source changes provided:

Source must implement IPropertyNotifyChanged

Single binding

Bind a target to a single property on source

Example: TextBlock.Text to Customer.Age

List binding

Bind a target to a array, collection etc.

Example: Treeview.ItemsSource to Collection object

Data Templates Templates provide a convenient way to centralize the replacement UI for: Tabular data Hierarchical data Controls Data Template Define the UI for one Type Example: Customer class Render UI with six TextBlock objects and one Image

Templates provide a convenient way to centralize the replacement UI for:

Tabular data

Hierarchical data

Controls

Data Template

Define the UI for one Type

Example: Customer class

Render UI with six TextBlock objects and one Image

Data Templates

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Custom Controls Custom elements Less need for custom elements in WPF First consider getting custom look via Composed UI Styles Templates If you must create custom element choose base: Existing control Control UserControl

Custom elements

Less need for custom elements in WPF

First consider getting custom look via

Composed UI

Styles

Templates

If you must create custom element choose base:

Existing control

Control

UserControl

Custom Controls User control benefits Simple Easy to compose sub-elements into new class Easily add custom element to UI tree Control library author Create custom User Control Compiled into assembly Control consumer Add reference to assembly Bring namespace into scope with xmlns attribute

User control benefits

Simple

Easy to compose sub-elements into new class

Easily add custom element to UI tree

Control library author

Create custom User Control

Compiled into assembly

Control consumer

Add reference to assembly

Bring namespace into scope with xmlns attribute

User Controls

Agenda Discover the top WPF benefits Creating a WPF application XAML Layout Styles Using services and databases Data Templates User Controls Control Templates

Discover the top WPF benefits

Creating a WPF application

XAML

Layout

Styles

Using services and databases

Data Templates

User Controls

Control Templates

Control Templates All controls in WPF are lookless Each has a default UI template We can replace default template with our own control template Any valid UI element can be part of template Templates also support binding Templates do not change behavior of element

All controls in WPF are lookless

Each has a default UI template

We can replace default template with our own control template

Any valid UI element can be part of template

Templates also support binding

Templates do not change behavior of element

Control Templates

Session Summary WPF is a rich UI programming framework Since WPF is managed code, working with .NET APIs is easy and familiar Core concept is the composable UI model Create UI out of any valid WPF element Mix and merge elements Formalize these replacement parts with Styles and Templates

WPF is a rich UI programming framework

Since WPF is managed code, working with .NET APIs is easy and familiar

Core concept is the composable UI model

Create UI out of any valid WPF element

Mix and merge elements

Formalize these replacement parts with Styles and Templates

For More Information Online Resources msdn.microsoft.com windowsclient.net wpfwiki.com Local Community adnug.org agileaustin.org southcentraldevelopers.com

Online Resources

msdn.microsoft.com

windowsclient.net

wpfwiki.com

Local Community

adnug.org

agileaustin.org

southcentraldevelopers.com

Microsoft Press Publications For the latest titles, visit www.microsoft.com/learning/books/devtools

Non-Microsoft Publications These books can be found and purchased at all major book stores and online retailers

Training Resources For training information and availability www.microsoft.com/learning Course ID Title 6460A Windows Presentation Foundation

RAMP-UP Are you ready to take your career as a developer to the next level? Looking for a learning experience that is designed for you? Join MSDN Ramp Up and Summit Your Career! MSDN Ramp Up is your online source that provides free training and technical resources to help take your development skills to the next level. Step-by-Step training plans to build your development skills. Premium technical content created by expert developers for developers. Access to valuable online e-learning, e-references, and virtual labs. 50% discount on select certification exams and 30% discount on Microsoft Press training kits. Join Ramp Up for free today! Go to: http://msdn.microsoft.com/rampup

Are you ready to take your career as a developer to the next level?

Looking for a learning experience that is designed for you?

Join MSDN Ramp Up and Summit Your Career!

MSDN Ramp Up is your online source that provides free training and technical resources to help take your development skills to the next level.

Step-by-Step training plans to build your development skills.

Premium technical content created by expert developers for developers.

Access to valuable online e-learning, e-references, and virtual labs.

50% discount on select certification exams and 30% discount on Microsoft Press training kits.

Join Ramp Up for free today!

Go to: http://msdn.microsoft.com/rampup