Intro to Windows Presentation Foundation (WPF)

7/31/2019 Intro to Windows Presentation Foundation (WPF)

1/53

Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company

Windows Presentation

Foundation Intro
http://www.learnnowonline.com/http://www.learnnowonline.com/


2/53


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


3/53


Agenda

Introducing Windows Presentation

Foundation (WPF)

Introducing XAML and the WPF Designer

Investigating XAML

Introducing Content and Grid Controls


4/53


5/53


Whats Wrong with What We Have?

Existing Windows graphics techniques make creating visuallyappealing 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, andeach 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


6/53


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


7/53


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


8/53


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


9/53


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


10/53


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


11/53


WPF Reference Application

Family.Show


12/53


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


13/53


WPF vs. Silverlight

Microsoft provides two technologies for client-side 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


14/53


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 WindowsXP)

Provides richest functionality

Full support for 3D graphics


15/53


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


16/53


An Inconvenient Truth (or Two)

Far more difficult to create a decent-looking applicationin 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


17/53


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

For Windows Forms application

Must write code to generate the interface

For WPF

Can either write code, or can write XAML

XAML WPF is not one-to-one mapping Some names in XAML dont match the same member names in WPF classes


18/53


Agenda

Introducing WPF


Investigating XAML Introducing Content and Grid Controls


19/53


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)


20/53


Investigating Routed Events

RoutedEventArgs parameter in event handlergives 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


21/53


Properties of RoutedEventArgs

Handled

OriginalSource

RoutedEvent

Source


22/53


Agenda

Introducing Windows Presentation Foundation(WPF)


Investigating XAML



23/53


24/53


Investigating XAML

DEMO


25/53


Simple Properties/Type Converters

Dragging Button control onto design surfacecreates 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


26/53


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


27/53


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


28/53


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 objectswith properties require special care

Represent as nested elements

Named Parent.Property (Grid.Background)


29/53


DEMO

Complex properties


30/53


Markup Extensions

Usually, standard XAML markup provides functionalityyou need

Sometimes not possible to set property value at designtime

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 asattribute As attribute, always surrounded with { }

Indicating value supplied at runtime


31/53


32/53


DEMO

Markup extension/binding


33/53


Attached Properties

Nest a control within a Grid

Specify its row and column with Grid.Row andGrid.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)


34/53


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?


35/53


Attached Properties

Of course, Grid doesn't keep track of all itschildren's coordinates

Child controls all inherit from DependencyObject

Defined to maintain an unlimited number of dependencyproperties

Parent (Grid) maintains a single instance of a fieldfor each property

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


36/53


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 )


37/53


Agenda

Introducing WPF


Investigating XAML



38/53


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!


39/53


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)


40/53


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


41/53


List Box as Container

DEMO


42/53


Working with the Grid Control

DEMO


43/53


Dependency Properties

In standard .NET code, property is defined using twoprocedures

setter and getter

More complex mechanism here

Workflow uses same mechanism

Dependency properties allow for:

Styling

Automatic data binding

Animation

Change notification

and more


44/53


DependencyObject Class

DependencyProperty class acts as base for theproperties

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


45/53


Investigating DependencyProperty

.NET maintains internal dictionary of classesand 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 propertythat wraps up the dependency property


46/53


47/53


In Constructor

[Visual Basic]MyClass.IsAvailableProperty = _

DependencyProperty.Register("IsAvailable", _

GetType(Boolean), GetType(MyClass))

[C#]

MyClass.IsAvailableProperty =

DependencyProperty.Register("IsAvailable",

typeof(bool), typeof(MyClass))


48/53


Property Wrapper

[Visual Basic]Public Property IsAvailable() As Boolean

Get

Return _

CType(GetValue(MyClass.IsAvailableProperty), Boolean)

End GetSet(ByVal value As Boolean)

SetValue(MyClass.IsAvailableProperty, value)

End Set

End Property


49/53


Property Wrapper

[C#]

public bool IsAvailable

{

get {

return (bool) GetValue(MyClass.IsAvailableProperty);

}

set { SetValue(MyClass.IsAvailableProperty, value) }}


50/53


Using Attached Properties

Button control doesnt expose Grid.Column orGrid.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 andDependencyObject.SetValue


51/53


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);


52/53


Interacting with the Grid

Add code to move button to new row


53/53

Learn More!

This is an excerpt from a larger course. Visitwww.learnnowonline.comfor the full details!
http://www.learnnowonline.com/http://www.learnnowonline.com/http://www.learnnowonline.com/

Intro to Windows Presentation Foundation (WPF)

Documents

Transcript of Intro to Windows Presentation Foundation (WPF)