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
Windows Presentation Foundation
DOCUMENT SERVICES XPS Documents Packaging Services USER INTERFACE SERVICES Application Services Deployment Services Controls Databinding Layout

XPS Viewer

MEDIA INTEGRATION LAYER Imaging Effects 2D Text 3D Animation Composition Engine Video Audio

BASE SERVICES XAML Accessibility Input & Eventing Property System

Unmanaged
Composition Engine Windows Media Foundation

Desktop Windows Manager Media Integration Layer DirectX

Property Engine

Input / Eventing System

Managed

.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

  Graphical  interface,  e.g., forms  and  controls On-screen  document s Fixed-format  document s Images

Windows Forms X

PDF  

Windows Forms/ GDI+  

Windows Media  Player  

Direct3D  

WPF X

X

 

 

 

 

X

 

X

 

 

 

X

 

 

X

 

 

X

Video and audio

 

 

 

X

 

X

Two-dimensional  graphics Three-dimensional  graphics

 

 

X

 

 

X

 

 

 

 

X

X

Extensible Application Markup Language (XAML)

Designer-Developer Productivity
• • • Microsoft Tools for Designers & Developers

With XAML designers & Declarative Programming through XAML developers can streamline their collaboration Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Developers add business logic

Designers design

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
<Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button>

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

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

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

Panel Elements Control elements Geometric elements

Document elements

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 Positions child elements in sequential position from left to right, breaking content to the next line at the edge of its containing box Allows its child elements to be positioned along the edges of the panel Allows positioning its children precisely on a grid using rows and columns (Default Layout for VS2008) Allows a developer position its children freely anywhere within the panel's boundaries

WrapPanel DockPanel
• •

Grid Canvas

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 with other platforms AttributeBased Programming
Enterprise Services

Extensibility Location transparency MessageOriented Programming
System.Messaging

WS-* Protocol Support
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…

Sign up to vote on this title
UsefulNot useful