The Windows Presentation Foundation

Sujith Gokuladas
Infosys
Agenda Day - 1

• Microsoft .NET Framework 3.0

• Windows Presentation Foundation
• Why Windows Presentation Foundation?
• Extensible Application Markup Language (XAML)
• Presentation Elements in WPF
• Media Elements in WPF
Agenda Day - 2

• 2D & 3D Graphics
• Documents In WPF
• WPF Over The Web
• Microsoft SilverLight
• Overview of WCF, WF and CardSpace
• References
Microsoft .NET Framework 3.0
.NET At The Core
Windows Presentation Foundation
WPF Architecture

DOCUMENT SERVICES USER INTERFACE SERVICES

Windows Presentation Foundation

Application
XPS Documents Controls
Services
Databinding
Deployment
Packaging Services Layout
Services
XPS Viewer

MEDIA INTEGRATION LAYER BASE SERVICES

Imaging 2D Audio XAML

Text
Effects 3D Video Accessibility

Animation Input & Eventing

Composition Engine Property System

Unmanaged Desktop Windows Manager

Input / Managed
Property
Eventing
Engine
System
Composition
Engine Media Integration Layer

Windows Media
Foundation DirectX .NET Framework 2.0

Windows Vista Display Driver (LDDM)

Print Spooler
Illustrating the Problem
Advantages of WPF

• The Ability for Developers and Designers to Work

Together
• Common Technology for Windows and Web Browser
User Interfaces
• Resolution Independent
A Unified Platform for Modern User
Interfaces

Windows Forms/ Windows Media 
  Windows Forms PDF GDI+ Player Direct3D WPF

Graphical  X         X
interface, 
e.g., forms 
and 
controls

On-screen  X         X
document
s

Fixed-format    X       X
document
s

Images     X     X

Video and audio       X   X

Two-dimensional      X     X
graphics

Three-dimensional          X X
graphics
Extensible Application Markup Language (XAML)
Designer-Developer Productivity

• Microsoft Tools for Designers &

Developers

• With XAML
Declarative designers
Programming &
through
developers
XAML can streamline
• their
Third Partycollaboration
Tools (e.g. Aurora by
Designers design Mobiform, ZAM 3D by ElectricDevelopers
Rain) add business logic
XAML

• Designing a user interface is easier with XAML

• Code for XAML is shorter than code for previous UI
designing techniques
• XAML designed user interfaces are easier to transfer
and present in other environments
• Designing a dynamic UI is absolutely easier with XAML
Declarative Programming Through XAML

XAML = Extensible Application Markup Language

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

XAML C# VB.NET
<Button Width="100"> OK Button b1 = new Button(); Dim b1 As New Button
<Button.Background> b1.Content = "OK"; b1.Content = "OK"
LightBlue b1.Background = new b1.Background = New _
</Button.Background> SolidColorBrush(Colors.LightBlue); SolidColorBrush(Colors.LightBlue)
</Button> b1.Width = 100; b1.Width = 100
XAML Elements

• Root elements
• Windows and Page elements are the most common root elements
• Panel Elements
• These elements help you to lay out your user interface
• Control elements
• These elements define several types of controls in XAML and let you
put a control on your UI and customize it
• Geometric elements
• This kind of elements helps you to draw shapes and geometric
graphics on your UI
• Document elements
• Compare these elements with some HTML elements such as <p>,
<table> and <i>
The Root Element

• The root element of an XAML document can contain

only a Window, a Canvas, or panels
• Once the root element is defined, children are defined
within the root element:
<Window xmlns=“
http://schemas.microsoft.com/winfx/2006/xaml/presentation
”
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml” >
<Button>Hello World</Button>
</Window>
Hello World
Layout

• To organize the various parts of an interface, a WPF

application uses panels for layout
• Each panel can contain children, including controls such
as buttons and text boxes, and other panels
• Different kinds of panels provide different layout options
Different kinds of panels

• StackPanel
• Lays out your elements in a manner similar to a stack
• WrapPanel
• Positions child elements in sequential position from left to right,
breaking content to the next line at the edge of its containing box
• DockPanel
• Allows its child elements to be positioned along the edges of the panel
• Grid
• Allows positioning its children precisely on a grid using rows and
columns (Default Layout for VS2008)
• Canvas
• Allows a developer position its children freely anywhere within the
panel's boundaries
StackPanel

<Window x:Class="WPFDemoes.Window1“ xmlns=

http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="StackPanelDemo" Height="200" Width="300">
<StackPanel>
<TextBox Background="Coral">Hello 1</TextBox>
<TextBox Background="Plum">Hello 2</TextBox>
<TextBox Background="Aquamarine">Hello 3</TextBox>
</StackPanel>
</Window>
WrapPanel

<Window x:Class="WPFDemoes.Window1“ xmlns=

http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="StackPanelDemo" Height="190" Width="300">
<WrapPanel>
<TextBox Background="Coral" Width="300">Hello 1</TextBox>
<TextBox Background="Plum" Width="300">Hello 2</TextBox>
<TextBox Background="Aquamarine"
Width="300">Hello 3</TextBox>
</WrapPanel>
</Window>
DockPanel

<Window x:Class="WPFDemoes.Window1“ xmlns=

http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=
http://schemas.microsoft.com/winfx/2006/xaml Title="DockPanelDemo"
Height="190" Width="300">
<DockPanel>
<TextBox Background="Coral" DockPanel.Dock="Top">Hello 1</TextBox>
<TextBox Background="Plum" DockPanel.Dock="Bottom">Hello
2</TextBox>
<TextBox Background="Aquamarine" DockPanel.Dock="Left">Hello 3
</TextBox>
<TextBox Background="Teal" DockPanel.Dock="Right">Hello 4
</TextBox>
<TextBox Background="LawnGreen">Hello 5</TextBox>
</DockPanel>
</Window>
Grid

<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition /><RowDefinition /><RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition /><ColumnDefinition /><ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Background="Coral" Grid.Row="0" Margin="5" Grid.ColumnSpan="2">
Hello 1</TextBox>
<TextBox Background="Plum" Grid.Row="0" Grid.Column="2" Margin="5">Hello 2
</TextBox>
<TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0" Margin="5"
Grid.RowSpan="2">Hello 3</TextBox>
<TextBox Background="Teal" Grid.Row="1" Grid.Column="1" Margin="5">Hello 4
</TextBox>
<TextBox Background="LawnGreen" Grid.Row="2" Grid.Column="2"
Margin="5">Hello 5 </TextBox>
</Grid>
* Root element is ignored
Canvas

<Canvas>
<TextBox Background="Coral" Grid.Row="0" Grid.Column="0"
Canvas.Top="10" Canvas.Left="20">
Hello 1 </TextBox>
<TextBox Background="Plum" Grid.Row="0" Grid.Column="1"
Canvas.Bottom="60“ Canvas.Left="40">
Hello 2 </TextBox>
<TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0"
Canvas.Top="80" Canvas.Right="110">
Hello 3</TextBox>
<TextBox Background="Teal" Grid.Row="1" Grid.Column="1"
Canvas.Bottom="95" Canvas.Right="30">
Hello 4</TextBox>
</Canvas>
Styles and Templates

• Allows designers to create templates

• Allow better separation between designers and
developers
• WPF styles are typically defined as a resource, which is
just data defined separately from an application's code
• A style can be derived from another style
• A style can also define triggers that specify common
aspects of interactive behavior
Styles and Templates

<Style x:Key="ButtonStyle">
<Setter Property="Control.Background" Value="Red"/>
<Setter Property="Control.FontSize" Value="16"/>
</Style>

<Button Style="{StaticResource ButtonStyle}">Click

Here</Button>
Aero Theme Button
iPod Application
Media Elements in WPF
MediaElement

• Runs in Clock Mode or Independent mode

• By default, the media that is defined by the Source
property plays immediately after the MediaElement
object has loaded
• To suppress the media from starting automatically, set
the AutoPlay property to false
• For best performance, avoid explicitly setting the width
and height of a MediaElement, rather, allow the media
to display at its natural size
MediaPlayer

• Not a Windows Presentation Foundation control

element
• Only way to implement a MediaPlayer is to create it in
the codebehind file
Media Player
2D, 3D and Imaging in WPF
2D Graphics, 3D Graphics, Imaging

3D Graphics
WPF support for 2D and 3D graphics, and imaging

• Graphics - The following areas comprise the Windows

Presentation Foundation graphic APIs.
• Brushes. Use the Brush classes to paint areas with solid colors,
patterns, images, and drawings.
• Shapes. Use Shape classes to create and render 2-D
geometric shapes.
• Imaging. Use the imaging classes to encode, manipulate, and
displays bitmaps, and to apply special effects such as glow and
blur to images and vectors.
WPF support for 2D and 3D graphics, and imaging

• Geometries. Geometries, like shape objects, represent 2-D

shapes. Geometries are more versatile than shape objects, in
that they can be used to define curves, clipping regions, and
hit-testing areas.
• Transformations. Use the Transform classes to rotate,
translate, scale, and apply other 2-D effects to geometries,
visuals, brushes, framework elements, and controls.
• Animations. Use the animation and timing APIs to make objects
change color, move, spin, grow, shrink, and more.
• 3-D Graphics - The System.Windows.Media.Media3D
namespace defines 3-D graphics primitives, transformations,
and animations that can be used to create 3-D controls and
graphics.
Documents in WPF
ClearType & Antialiasing

Sub-pixel positioning & natural widths

FlowDocument Demo
XPS (XML Paper Specification)

• provides users and developers with a robust, open and

trustworthy format for electronic paper
• XPS documents print better, can be shared easier, are
more secure
• .NET Framework 3.0 provides the APIs that enable you
to add XPS-based publishing, importing, and viewing
technologies to your Windows Presentation Foundation
(WPF) application
XBAP (XAML Browser Application)

• XBAP Applications are online-only applications that run

in the browser and are not installed
• These applications execute in a security sandbox and
harness the power of the WPF platform on the Web
• All XBAP files deployed from the Internet are running in
partial trust
• Partial trust refers to a security sandbox based on
Code Access Security (CAS)
• Can run in IE6.0 or Greater or any browser that hosts
Microsoft Web Browser Control
Microsoft SilverLight

• Silverlight is a cross-browser, cross-platform plug-in for

delivering the next generation of Microsoft .NET based
media experiences and rich interactive applications for
the Web
Windows Communication Foundation
Windows Communication Foundation

• Microsoft's unified framework for building secure,

reliable, transacted, and interoperable distributed
applications
• set of .NET technologies for building and running
connected systems
Unified Programming Model

ASMX .NET
Remoting

Interop Extensibility
with other Location
platforms transparency

Attribute- Message-
Based Oriented
Programming WS-* Programming
Protocol
Enterprise Support
System.Messaging
Services
WSE
• WCF extends the .NET Framework
• Services are built in Visual Studio
2005 using any .NET programming
language
Windows Workflow Foundation
Workflow

• A workflow is a reliably repeatable pattern of activity

enabled by a systematic organization of resources,
defined roles and mass, energy and information flows,
into a work process that can be documented and
learned. Workflows are always designed to achieve
processing intents of some sort, such as physical
transformation, service provision, or information
processing
Windows Workflow Foundation

• Microsoft technology for defining, executing, and

managing workflows
• XAML is commonly used for declaring the structure of a
workflow
Windows CardSpace
Q&A
Downloads

• Microsoft .NET 3.0

• Windows Presentation Foundation Downloads
• Microsoft Expression Studio
• Microsoft Silverlight
• Visual Studio Code Name Orcas Beta 2
References

• www.netfx3.com
• www.windowsclient.net
• www.microsoft.com/silverlight
• www.microsoft.com/expression
• www.msdn.microsoft.com/netframework
References

• www.msdn2.microsoft.com/en-us/library/aa663364.aspx
• www.beta.channel9.msdn.com/Media/209137/?CommentID=
• www.msdn2.microsoft.com/en-us/library/aa480198.aspx
• www.msdn2.microsoft.com/en-us/library/aa480223.aspx
• www.weblogs.asp.net/scottgu/archive/tags/WPF/default.aspx
• www.msdn.microsoft.com/msdnmag/issues/07/08/WPF
Thank You…