Intro To Windows Presentation Foundation (WPF)

Windows Presentation Foundation Intro
Learn More @ http://www.learnnowonline.com

Copyright by Application Developers Training Company
Objectives
Introduce Windows Presentation Foundation (WPF) Investigate XAML and the XAML designer in Visual Studio 2010 Learn about XAML controls, properties, and events Work with container controls, dependency properties, and the Grid control
Agenda
Introducing Windows Presentation Foundation (WPF) Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

Do We Need Another UI Paradigm?

Applications created using Windows Forms dont show off well Applications require a new way to present information, rather than rectangular forms, charts, and graphics

Whats Wrong with What We Have?

Existing Windows graphics techniques make creating visually appealing applications difficult
Up until recently, graphics hardware not powerful enough, in general,
for more than Windows Forms
Could create movie-style interfaces, but its difficult, and each requires its own set of tools
3D graphics extremely difficult without external libraries Standard Windows GDI and USER libraries extremely limited
Windows Presentation Foundation provides a new medium

Takes advantage of hardware power Provides consistent, powerful graphics platform

WPF to the Rescue

Integrated, vector-based composition engine
Utilizing the power of the PC
throughout the graphics stack Resolution independence
Unified approach to UI, documents, and media

Integration as part of development
experience
WPF to the Rescue

Declarative programming
Brings designers directly into application
development Allows for separation of design and code
Ease of deployment
Allowing administrators to deploy and manage
applications securely

Graphics and Composition

Includes modern graphics capabilities
2D and 3D graphics
Image effects and multiple codecs Hardware-accelerated sub-pixel ClearType Full video and audio support

Important Questions, Part I

Does WPF allow me to do something I couldnt do before?
No: Its all about the amount of work you want to
put into achieving the results
Should I use WPF instead of DirectX?

That dependsfor hard core games, DirectX
perhaps a better choice Can combine WPF and DirectX in the same application
Important Questions, Part II

Should I drop Windows Forms and use WPF instead?
Debatable, for ordinary business applications
Visual Studio provides similar sets of controls for each WPF makes it far easier to create rich media-centric applications If you need Windows 98 support, Windows Forms are the only choice
Should I use WPF instead of Adobe Flash?

For Web-based applications, Flash is currently standard for media Silverlight provides small WPF runtime that supports XAML and
JavaScript
Perfect for rich browser-based applications

WPF Reference Application

Family.Show

Family.Show
Available for download at http://www.codeplex.com/familyshow Includes full source code and documentation on its design Includes family tree (truncated) for British royal family Can easily create your own family tree Provides rich visual representation, difficult to create without WPF Investigate zooming and panning features Different views of information

WPF vs. Silverlight

Microsoft provides two technologies for clientside applications: WPF and Silverlight Both allow you to create client applications
Both use XAML to design the interface
WPF has entire .NET Framework behind it

Silverlight works with a small subset of Framework

WPF vs. Silverlight

WPF:
Ships as part of .NET Framework (3.0 and later) Runs as a Windows application Or as Web Browser application (XBAP) XBAPs run only in Internet Explorer with .NET 3.0 and IE and Firefox with .NET 3.5 and later Runs only on Windows machines (starting with Windows
XP) Provides richest functionality

Full support for 3D graphics

WPF vs. Silverlight

Silverlight:
Ships independently; isnt part of .NET Framework Can be hosted by Web browsers only Internet Explorer, Firefox, Safari Runs on Windows, Mac, Linux clients Functionality is a subset of WPFs feature set Uses only small subset of .NET Framework
Which do you use?

Depends on target audience, technological needs,
preferred deployment

An Inconvenient Truth (or Two)

Far more difficult to create a decent-looking application in XAML
Because the bar is so much lower in other environments
Developers creating applications in XAML generally create
ugly applications Good XAML applications require graphic designers
On the other hand

Far easier to create great-looking application Because Windows and Web forms are so limited
Also check out Microsoft Expression Studio

WPF and XAML

WPF and XAML: The same thing?
XAML is XML-based grammar Declaratively defines WPF applications
Windows Forms is a set of classes

WPF, too, is a set of classes Must write code to generate the interface Can either write code, or can write XAML Some names in XAML dont match the same member names in WPF classes
For Windows Forms application For WPF XAML <-> WPF is not one-to-one mapping

Agenda
Introducing WPF Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

WPF Project Templates

In Visual Studio 2010, several project templates for WPF:
WPF Application
WPF Browser Application WPF Custom Control Library (allows you to use Windows Forms
controls) WPF User Control Library (creates new WPF controls)

Investigating Routed Events

RoutedEventArgs parameter in event handler gives it away
Somethings different about WPF events
Events bubble up to container

Code can alter the perception of the source object
Code can always determine the original source

And the original event

Properties of RoutedEventArgs
Handled OriginalSource RoutedEvent Source

Agenda
Introducing Windows Presentation Foundation (WPF) Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

Investigating XAML
XAML is simple
But provides several different ways to set property
values
Simple Properties/Type Converters Complex Properties Markup Extensions Attached Properties

Investigating XAML
DEMO

Simple Properties/Type Converters

Dragging Button control onto design surface creates several properties
Markup counts on Button class providing Content,
Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width properties
Some properties are simple strings

Content and Name properties
Others are more complex

Type Converters
Height and Width properties?
Properties are numeric Markup supplies values as strings Along the line, some code must convert Works because Integer class provides built-in conversion
from string
Other properties even more complex:

HorizontalAlignment and VerticalAlignment? Need to convert from string (Bottom, Center, Stretch, or Top; Center, Left, Right, Stretch) to enumerated values
Type Converters
Margin adds own set of issues
Can supply a single value (all four sides) Can supply two values (left/right and top/bottom) Can supply four values (left, top, right, bottom)
Margin property is a Thickness structure

Contains four integers Setting property calls constructor for Thickness structure Requires converter to read the comma-delimited string
and convert to a call to the constructor

Complex Properties
Type converters work well
Some properties cant be represented by single value
Want to specify background of a Grid control as a linear gradient?

Cant represent the behavior with a single value
Properties of elements that are themselves objects with properties require special care
Represent as nested elements
Named Parent.Property (Grid.Background)

DEMO
Complex properties

Markup Extensions
Usually, standard XAML markup provides functionality you need Sometimes not possible to set property value at design time
Some properties must be set dynamically, at runtime Need to use markup extension Allows you to set property in non-standard way
Can specify markup extension as nested element, or as attribute

As attribute, always surrounded with { } Indicating value supplied at runtime

Markup Extensions
Declarative binding requires markup extension:
Property= "{Binding ElementName=ObjectName, Path=PropertyName}"
Can also express using child element:

<Object.Property> <Binding ElementName="ObjectName", Path="PropertyName"/> </Object.Property>
DEMO
Markup extension/binding

Attached Properties
Nest a control within a Grid
Specify its row and column with Grid.Row and
Grid.Column properties Where did these come from?

Child control doesn't supply!
Grid adds these to all its child controls

In other words, they're attached properties Properties appear as properties of the class But they're defined in a different class (Grid, in this case)

Attached Properties
Specific syntax:
DefiningType.PropertyName Grid.Row Aren't actually properties Converted to method calls by compiler Defining class must provide GetPropertyName and
SetPropertyName methods
Grid.GetRow and Grid.SetRow
Technique hides what's really going on

Calling method in defining class? Does Grid keep track of all its children's coordinates?

Attached Properties
Of course, Grid doesn't keep track of all its children's coordinates Child controls all inherit from DependencyObject
Defined to maintain an unlimited number of dependency
properties
Parent (Grid) maintains a single instance of a field for each property

Grid.RowProperty for Grid.Row, for example Child maintains its own value for that property

Attached Properties
Calling parent control's GetPropertyName and SetPropertyName methods equivalent to calling GetValue and SetValue methods of child object To retrieve Grid.Row property of TextBox named DemoTextBox, use expression like:
DemoTextBox.GetValue(Grid.RowProperty)

Agenda
Introducing WPF Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

Content and Grid Controls

Many controls inherit from ContentControl (including Button) and can contain other controls
Button with image and text? No problem! ListBox containing a bunch of TextBox controls? No problem!

Working with Layout Controls

Several controls useful for laying out other controls DockPanel
Allocates an edge for each child control Useful for defining rough layout
StackPanel
Stacks children horizontally or vertically Useful internal to other controls (Button, for example)

Working with Layout Controls

Grid
Arranges children in a grid No need for fixed sizes or positions Rescales when resized
Canvas
No layout logic
Manually control each aspect of layout

List Box as Container

DEMO

Working with the Grid Control

DEMO

Dependency Properties
In standard .NET code, property is defined using two procedures
setter and getter
More complex mechanism here

Workflow uses same mechanism
Dependency properties allow for:

Styling Automatic data binding
Animation
Change notification and more
DependencyObject Class
DependencyProperty class acts as base for the properties DependencyObject is base for classes that can consume and expose dependency properties XAML classes expose far more properties than the corresponding prior classes
Need some internal plumbing to handle

Investigating DependencyProperty
.NET maintains internal dictionary of classes and the properties they expose DependencyProperty instance defined as a static/shared member of a class In constructor, code registers property, its type, and hosting class with .NET Can optionally create standard .NET property that wraps up the dependency property
Declaring the Property

VB: Public Shared IsAvailableProperty As DependencyProperty
C#: public static DependencyProperty IsAvailableProperty;

In Constructor
[Visual Basic] MyClass.IsAvailableProperty = _ DependencyProperty.Register("IsAvailable", _ GetType(Boolean), GetType(MyClass)) [C#] MyClass.IsAvailableProperty = DependencyProperty.Register("IsAvailable", typeof(bool), typeof(MyClass))

Property Wrapper
[Visual Basic] Public Property IsAvailable() As Boolean Get Return _ CType(GetValue(MyClass.IsAvailableProperty), Boolean) End Get Set(ByVal value As Boolean) SetValue(MyClass.IsAvailableProperty, value) End Set End Property

Property Wrapper
[C#] public bool IsAvailable { get { return (bool) GetValue(MyClass.IsAvailableProperty); } set { SetValue(MyClass.IsAvailableProperty, value) } }

Using Attached Properties

Button control doesnt expose Grid.Column or Grid.Row
Yet these attributes exist in the XAML markup
These are attached properties

Properties added by container, when hosted Retrieve and set using
DependencyObject.GetValue and DependencyObject.SetValue

Working with Attached Properties

[Visual Basic] Dim row As Integer = CType(DemoButton.GetValue(Grid.RowProperty), Integer) DemoButton.SetValue(Grid.RowProperty, row + 1) [C#] int row = (int)DemoButton.GetValue(Grid.RowProperty); DemoButton.SetValue(Grid.RowProperty, row + 1);

Interacting with the Grid

Add code to move button to new row

Learn More!
This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!


Intro To Windows Presentation Foundation (WPF)

Uploaded by

Document Information

Original Title

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Intro To Windows Presentation Foundation (WPF)

Uploaded by

Copyright:

Windows Presentation Foundation Intro

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Do We Need Another UI Paradigm?

Learn More @ http://www.learnnowonline.com

Whats Wrong with What We Have?

for more than Windows Forms

Windows Presentation Foundation provides a new medium

Learn More @ http://www.learnnowonline.com

WPF to the Rescue

throughout the graphics stack Resolution independence

Unified approach to UI, documents, and media

WPF to the Rescue

development Allows for separation of design and code

Learn More @ http://www.learnnowonline.com

Graphics and Composition

Learn More @ http://www.learnnowonline.com

Important Questions, Part I

put into achieving the results

Should I use WPF instead of DirectX?

Important Questions, Part II

Should I use WPF instead of Adobe Flash?

Learn More @ http://www.learnnowonline.com

WPF Reference Application

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

WPF vs. Silverlight

WPF has entire .NET Framework behind it

Learn More @ http://www.learnnowonline.com

WPF vs. Silverlight

XP) Provides richest functionality

Learn More @ http://www.learnnowonline.com

WPF vs. Silverlight

Which do you use?

Learn More @ http://www.learnnowonline.com

An Inconvenient Truth (or Two)

ugly applications Good XAML applications require graphic designers

On the other hand

Also check out Microsoft Expression Studio

WPF and XAML

XAML is XML-based grammar Declaratively defines WPF applications

Windows Forms is a set of classes

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

WPF Project Templates

controls) WPF User Control Library (creates new WPF controls)

Learn More @ http://www.learnnowonline.com

Investigating Routed Events

Events bubble up to container

Code can always determine the original source

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Simple Properties/Type Converters Complex Properties Markup Extensions Attached Properties

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Simple Properties/Type Converters

Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width properties

Some properties are simple strings

Others are more complex

Other properties even more complex:

Margin property is a Thickness structure

and convert to a call to the constructor

Learn More @ http://www.learnnowonline.com

Want to specify background of a Grid control as a linear gradient?

Named Parent.Property (Grid.Background)