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/7/31/2019 Intro to Windows Presentation Foundation (WPF)
2/53
Learn More @ http://www.learnnowonline.comCopyright 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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
3/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Agenda
Introducing Windows Presentation
Foundation (WPF)
Introducing XAML and the WPF Designer
Investigating XAML
Introducing Content and Grid Controls
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
4/53
7/31/2019 Intro to Windows Presentation Foundation (WPF)
5/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
6/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
7/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
8/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
9/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
10/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
11/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
WPF Reference Application
Family.Show
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
12/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
13/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
14/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
15/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
16/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
17/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
18/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Agenda
Introducing WPF
Introducing XAML and the WPF Designer
Investigating XAML Introducing Content and Grid Controls
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
19/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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)
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
20/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
21/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Properties of RoutedEventArgs
Handled
OriginalSource
RoutedEvent
Source
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
22/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Agenda
Introducing Windows Presentation Foundation(WPF)
Introducing XAML and the WPF Designer
Investigating XAML
Introducing Content and Grid Controls
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
23/53
7/31/2019 Intro to Windows Presentation Foundation (WPF)
24/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Investigating XAML
DEMO
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
25/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
26/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
27/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
28/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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)
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
29/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
DEMO
Complex properties
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
30/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
31/53
7/31/2019 Intro to Windows Presentation Foundation (WPF)
32/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
DEMO
Markup extension/binding
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
33/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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)
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
34/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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?
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
35/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
36/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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 )
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
37/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Agenda
Introducing WPF
Introducing XAML and the WPF Designer
Investigating XAML
Introducing Content and Grid Controls
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
38/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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!
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
39/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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)
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
40/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
41/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
List Box as Container
DEMO
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
42/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Working with the Grid Control
DEMO
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
43/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
44/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
45/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
46/53
7/31/2019 Intro to Windows Presentation Foundation (WPF)
47/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
In Constructor
[Visual Basic]MyClass.IsAvailableProperty = _
DependencyProperty.Register("IsAvailable", _
GetType(Boolean), GetType(MyClass))
[C#]
MyClass.IsAvailableProperty =
DependencyProperty.Register("IsAvailable",
typeof(bool), typeof(MyClass))
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
48/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
49/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Property Wrapper
[C#]
public bool IsAvailable
{
get {
return (bool) GetValue(MyClass.IsAvailableProperty);
}
set { SetValue(MyClass.IsAvailableProperty, value) }}
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
50/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
51/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
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);
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
52/53
Learn More @ http://www.learnnowonline.comCopyright by Application Developers Training Company
Interacting with the Grid
Add code to move button to new row
http://www.learnnowonline.com/http://www.learnnowonline.com/7/31/2019 Intro to Windows Presentation Foundation (WPF)
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/