Programming Windows Presentation Foundation (XAML)

Mark Davey

IT SpecialistToyota Motor Manufacturing

Indiana Inc.

Agenda

• Windows Presentation Foundation Overview

What is XAML, logical trees• Programming• Development & Deployment• Getting Windows Presentation Foundation & Tools

.NET At The Core

Windows Presentation Foundation

A productive, unified approach to UI, A productive, unified approach to UI,

media and documents to deliver media and documents to deliver

unmatched user experienceunmatched user experience

New Document Technologies

2D Graphics, 3D Graphics, Imaging

3D Graphics3D Graphics

Key Scenarios

Next-Gen Windows Smart Client applications:Next-Gen Windows Smart Client applications:

• Installed desktop applications

• Browser applications (XAML Browser Application)

• Flexible deployment

<Border Width="400"

BorderBrush="Green"

BorderThickness="9">

<StackPanel>

<MediaElement Source="aero.wmv" />

<Button>Hello</Button>

</StackPanel>

</Border>

Audio & Video

• Formats: WMV, MPEG, Some AVIs• Can be synchronized with animations• Windows Media Foundation used to instantiate playback machinery

into a DirectShow graph

ClearType & Antialiasing

Sub-pixel positioning & natural widthsSub-pixel positioning & natural widths

WPF/E aka Silverlight

• Microsoft realized that RIA (Rich Internet Applications) are the future.

• HTML/DOM/AJAX combo difficult to use and limited• Adobe Flash rapidly gaining market share YouTube, Yahoo start

page, Microsoft own pages• Video over internet very powerful application • Almost everything available in WPF except 3D• Not limited to Vista/XP2, Available on Mac and open source

versions on Linux• Full integration with .NET languages (C# VB.NET) and DLR (such

as Ruby & Python)• Probably more important than WPF, probably standard Microsoft

development medium in after 2009 due to its flexibility.

Building & Deploying WPF Apps

WPF Architecture

Property Engine

Input / Eventing System

.NET Framework 2.0

Desktop Windows Manager

Media Integration Layer

DirectX

Windows Vista Display Driver (LDDM)

Windows Media Foundation

Composition Engine

Print Spooler

ManagedUnmanaged

Application Services

Deployment Services

Databinding

USER INTERFACE SERVICES

XAML

Accessibility

Property System

Input & Eventing

BASE SERVICES

DOCUMENT SERVICES

Packaging Services

XPS Documents

Animation

2D

3D

AudioImaging

Text

VideoEffects

Composition Engine

MEDIA INTEGRATION LAYER

Controls

LayoutW

ind

ow

s P

rese

nta

tion

Fo

un

da

tion

XP

S V

iew

er

Designer-Developer Productivity

• Microsoft Tools for Designers & Microsoft Tools for Designers & DevelopersDevelopers

• Declarative Programming through Declarative Programming through XAMLXAML

• Third Party Tools (e.g. Aurora by Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)Mobiform, ZAM 3D by Electric Rain)Designers designDesigners design

With XAML designers & With XAML designers &

developers can streamline developers can streamline

their collaborationtheir collaboration

Developers add business logicDevelopers add business logic

Declarative Programming Through XAML

XAML = Extensible Application Markup LanguageXAML = Extensible Application Markup Language

•Easily toolable, declarative markup•Code and content are separate•Can be rendered in the browser / standalone application

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NET

Why XAML

It seems strangle to use XML as a declarative language that Microsoft would base their future on. Why?

• Concise implementation (Similar to HTML)• Human Readable (except Vector & Meshes)• Interoperable between multiple tools such as Blend,

Orcas, XAMLPAD

Controls, Templates, Styles & Resources, Layouts, Animation

Animation, Triggers, Timelines

<StackPanel> <StackPanel.Triggers> <EventTrigger RoutedEvent=“Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <BeginStoryboard.Storyboard> <Storyboard>

<ColorAnimation To="Yellow" Duration="0:0:0.5“ Storyboard.TargetName="TheBrush" Storyboard.TargetProperty="Color" />

<DoubleAnimation To="45" Duration="0:0:2" Storyboard.TargetName="LowerEllipseTransform" Storyboard.TargetProperty="Angle" />

... </StackPanel.Triggers>

… remainder of contents of StackPanel, including x:Name'd TheBrush and LowerEllipseTransform …

</StackPanel>

UI Services

• Templates

• Layout

• Controls Library

• Styles and Resources

• Annotation

Templated Button

XAML the starting point

• If you serialized a set of WPF objects XAML would be produced. • Most Microsoft applications generate WPF in XAML format.• Elements & attributes (WPF+Objects+XML=XAML)

• If you serialized a set of WPF objects XAML would be produced

Logical Tree

Canvas

StackPanel

Label ListBox StackPanel StatusPanel

String ListBoxItemListBoxItem

String String

StringString

• Visual Tree is Logical Tree Expanded using local themes

• Based up not just XAML but current windows configuration

Themes.

Can change based upon user UI

Visual Tree

• Visual Tree is Logical Tree Expanded using local themes

• Based up not just XAML but current windows

Themes.

Can change based upon user UI

Dependency Properties

• Multiple properties for each control (up to a 100) impossible to set all on every single control

• Much like CSS where properties set once for whole

Special Features – Change notification

– Property value inheritance

– Support for multiple providers

Determine Base Value

Evaluate (if an expression)

Apply Animation Coerce Validate

Attached Properties

• Effectively attached to arbitrary objects to set dependency properties

• Dependence Properties cannot be sen without being attached

Routed Events

• Events do not just happen on the object but also travel the tree and can be processed by other objects.

• Tunneling• Bubbling• Direct

Canvas

StackPanel

Label ListBox StackPanel StatusPanel

String ListBoxItemListBoxItem

String String

StringString

WPF Document APIs

Packaging Services

XpsDocument curDoc = new

XpsDocument(Package.Open("foo.xps"));

curDoc.SignDigitally(cert …);

curDoc.Close();

UUssee CCuussttoomm VViieewweerr

CCrreeaattee // UUssee PPaacckkaaggee

SSeerriiaalliizzee

WWPPFF CCoonntteenntt

TToo XXPPSS

CCrreeaattee // UUssee

XXPPSS DDooccuummeennttss

CCrreeaattee // UUssee DDooccuummeennttss

ww// RReessttrriicctteedd PPeerrmmiissssiioonnss

2D Graphics

• Drawing (Images ,Video, Geometry)• Brushes can be many different things – images,

gradients, solid colors. • Polygons

• Demo of 2D graphics using Blend

Data Binding

• UI can be bound to CLR objects and XML• Dependency properties can also be bound to ADO.NET and objects associated

with Web Services and Web properties • Sort, filter, and group views can be generated on top of the data• Data templates can be applied to data• Simple RSS demo

Layout & Databinding<StackPanel>

<Label>Select A Customer</Label><ListBox

Name="myListBox"Background="HoneyDew"ItemsSource="{Binding

{StaticResource myDataSource}}" </ListBox>

</StackPanel>

Binding Target Binding Source

Dependency ObjectDependency Object ObjectObject

Dependency Property

PropertyTwoWay

OneWay

OneWayToSource

Transforms

• Dependent properties can be changed allowing manipulation of objects on the screen.

• Parent object can hold many child objects that are all manipulated at one time.

• Often used with animation

Animation

• An dependency property can be manipulated with a animation object– Drawing– Images– Brushes– Shapes

<EventTrigger RoutedEvent="Canvas.Loaded"><BeginStoryboard><Storyboard x:Name="Ski"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Canvas3"

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/><SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.3"/><SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:05" Value="0.4"/><SplineDoubleKeyFrame KeyTime="00:00:06" Value="0.5"/><SplineDoubleKeyFrame KeyTime="00:00:07" Value="0.6"/><SplineDoubleKeyFrame KeyTime="00:00:08" Value="0.7"/><SplineDoubleKeyFrame KeyTime="00:00:08.3000000" Value="-0.7"/><SplineDoubleKeyFrame KeyTime="00:00:09" Value="-0.8"/><SplineDoubleKeyFrame KeyTime="00:00:10" Value="-1"/><SplineDoubleKeyFrame KeyTime="00:00:11" Value="-2"/><SplineDoubleKeyFrame KeyTime="00:00:12" Value="-3"/>

</DoubleAnimationUsingKeyFrames>

Multimedia

• Key feature of WPF and Silverlight allows integration of video, audio and speech

• TAG are

– Soundplayer (limited to WAV files only)– MediaPlayer (MP3 with full control)– MediaElement Video

Documents

• <FlowDocumentReader> is a class that can read documents

• XAML documents can be updated on the fly and built at runtime.

• Excellent example is using XSLT to create nice documents from simple markup tags.

• Demo of Rich Reading Experience

3D Graphics

• Lights, Camera Action!

Graphics in 3D are totally different with different controls/objects

• Viewport3D – a window into a 3D world• Camera <Viewport3D.Camera>• Objects <ModelVisual3D.Content>• Materials <ModelVisual3D.Material> Brush• Mesh <ModelVisual3D.Geometry>

Viewport3D – a window into a 3D world

• A 3D windowCamera

Lights ActionStar

Materials <ModelVisual3D.Material> Brush

• Just like 2D drawing 3D uses brushes which can be a solid color or a picture

<GeometryModel3D x:Name="Roof">

<GeometryModel3D.Material> <DiffuseMaterial Brush="Blue"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25" TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7"/> </GeometryModel3D.Geometry> </GeometryModel3D>

<DiffuseMaterial> <DiffuseMaterial.Brush> <ImageBrush ImageSource="pack://siteoforigin:,,,/Sample Models/Tiger.bmp" /> </DiffuseMaterial.Brush> </DiffuseMaterial>

Mesh <ModelVisual3D.Geometry>

• Each object is made up of a series of triangles or multisided polygons. A Series of 3D point represented as 3 numbers X,Y,Z.

• The order of the points represents the face.

<GeometryModel3D x:Name="Roof">

<GeometryModel3D.Material> <DiffuseMaterial Brush="Blue"/> </GeometryModel3D.Material> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="-0.25,0.25,0.25 0,0.5,0.25 0,0.5,-0.25 -0.25,0.25,-0.25 0,0.5,0.25 0.25,0.25,0.25 0.25,0.25,-0.25 0,0.5,-0.25" TriangleIndices="0 1 2 0 2 3 4 5 6 4 6 7"/> </GeometryModel3D.Geometry> </GeometryModel3D>

Interoperability

Incrementally embrace WPF, while Incrementally embrace WPF, while

leveraging existing investments.leveraging existing investments.

WPF - Windows Forms Interoperability

WPF - HWNDs

Getting Started with WPF

Next Steps

• First Buy • Title: Windows Presentation Foundation Unleashed• Author: Adam Nathan, Sams • (Currently the best book on the subject)

• Download the Blend 2 May Preview• Download the Net 3.0 SDK• Download the extensions to Visual Studio 2005.• Click on

Availability & Packaging

Microsoft Development SDK for Visual Studio 2005• Development

Microsoft Development Componets• Windows Expression Blend 2

Visual Studio “Orcas”• Component of .NET FramICRODmework 3.0 for

Q22007

Q2 Q4 Q12007

Q3 Q2 Q3 Q4

WPF Summary

Deliver Innovative User ExperiencesDeliver Innovative User Experiences

Increase Developer-Designer ProductivityIncrease Developer-Designer Productivity

Achieve Flexible Application DeploymentAchieve Flexible Application Deployment

Leverage Existing Code Base & Skill SetLeverage Existing Code Base & Skill Set

WPF Resources

• WPF @ Windows Vista Developer Centerhttp://msdn.microsoft.com/windowsvista/building/presentation/

• WPF/.NET Framework 3.0 Community Site

• Microsoft Expressionwww.microsoft.com/expression