Download - Introduction About WPF
-
8/9/2019 Introduction About WPF
1/60
1
Introduction about
Windows Presentation Foundation
Trainer: Thoai Nguyen
Duration: 4 hours
-
8/9/2019 Introduction About WPF
2/60
2
Agenda
Introduce WPF XAML
Dependency Properties and Routed Events
Commands in WPF Resources & Styles in WPF
Control Templates
Data Binding Data Templates
-
8/9/2019 Introduction About WPF
3/60
3
What is WPF?
WPF = Windows Presentation Foundation(Avolon)
An Engine?
A graphical display system for Windows Set of .NET libraries?
-
8/9/2019 Introduction About WPF
4/60
4
WPF uses DirectX
Windows
.NET Framework WPF DirectX
WPF applications use DirectX nomatter what type of user interfaceyou create
-
8/9/2019 Introduction About WPF
5/60
5
Resolution Independence
WPF bases its scaling on the system DPIsetting
-
8/9/2019 Introduction About WPF
6/60
6
The Evolution ofWPF
WPF 3.0
WPF 3.5 & VS.NET 2008
-
8/9/2019 Introduction About WPF
7/60
7
New Features in WPF 3.5
Firefox support forXBAPs
Data binding support forLINQ
Data binding support forIDataErrorInfo.
Support for placing 2-D elements on
3-D surfaces.
-
8/9/2019 Introduction About WPF
8/60
8
WPF will replace Windows FORM?
Windows FORM : mature WPF : future enhancements and longevity
Windows Form is stillsupportedNo need to recode myapplication for WPF
-
8/9/2019 Introduction About WPF
9/60
9
Silverlight
Is a subset ofWPF Silverlight 1.0: Javascript
Silverlight 2.0: .NET languages
Silverlight 3.0: Improve performance Silverlight 4.0: still Beta atm
-
8/9/2019 Introduction About WPF
10/60
10
Silverlight vs Flash?
Flash is mature Silverlight is future
Development IDE
.NET Framework &Languages
Perception
Microsoft has Windows
Demo: http://www.shinedraw.com/flash-vs-
silverlight-gallery/
-
8/9/2019 Introduction About WPF
11/60
11
Architecture ofWPF
PresentationFramework.dll
PresentationCore.dll WindowsBase.dll
milcore.dll WindowsCodecs.dll
Direct3D User32
ManagedWPF API
MediaIntegration
La er
-
8/9/2019 Introduction About WPF
12/60
12
The Last Word
Hardware acceleration Resolution independence
No fixed control appearance
Declarative user interfaces Object-based drawing
-
8/9/2019 Introduction About WPF
13/60
13
What is XAML?
Extensible Application Markup Language,and pronounced zammel
-
8/9/2019 Introduction About WPF
14/60
14
Graphical User Interfaces Before WPF
Hard to separate the graphical content from the code
Each graphical element (background, button, and so on) needs to
be exported as a separate.
User interface logic needs to be embedded in the code.
..
Designers dont work on VS.NET
-
8/9/2019 Introduction About WPF
15/60
15
The Variants of XAML
WPF XAML XPS XAML
Silverlight XAML
WF XAML
-
8/9/2019 Introduction About WPF
16/60
16
XAML Compilation
BAML = Binary Application Markup Language
XAML#
i g
bly
E b dd dr ourc
BAML
-
8/9/2019 Introduction About WPF
17/60
17
XAML Basics
Every element = an instance of a .NETclass
Allow nested elements
Can set the properties of each classthrough attributes
XAML Demo
-
8/9/2019 Introduction About WPF
18/60
18
Properties and Events in XAML
Simple Properties and Type Converters Complex Properties
Markup Extensions
Attached Properties Nesting Elements
Special Characters and Whitespace
Events
-
8/9/2019 Introduction About WPF
19/60
19
Understanding DependencyProperties
Dependency Properties are:
not normal properties
the basis for a number of key WPF wrapped by ordinary .NET property procedures
-
8/9/2019 Introduction About WPF
20/60
20
Defining and Registering a DependencyProperty
They are : represented by read-only static fields
registered in a static constructor
wrapped by a standard .NET property
Example
-
8/9/2019 Introduction About WPF
21/60
21
How WPF Uses DependencyProperties?
change notification dynamic value resolution.
-
8/9/2019 Introduction About WPF
22/60
22
Understanding Routed Events
Allows an event to originate in one elementbut be raised by another one
-
8/9/2019 Introduction About WPF
23/60
23
Defining and Registering a Routed Event
They are : represented by read-only static fields
registered in a static constructor
wrapped by a standard .NET event definition
Example
-
8/9/2019 Introduction About WPF
24/60
24
Event Routing
Direct events Bubbling events
Tunneling events
Handling a Suppressed Event
Example
-
8/9/2019 Introduction About WPF
25/60
25
What is Attached Events?
Scenario with a Stack Panel
pnlButtons.AddHandler(Button.Click, new
RoutedEventH
andler(DoSomething));
Command 1Command 2Command 3
...
-
8/9/2019 Introduction About WPF
26/60
26
Commands
Limitation of Events WPF fills in the gaps with a new
commanding model
-
8/9/2019 Introduction About WPF
27/60
27
Still has some fairly significant gaps
Command tracking Undoable commands
Can be in different modes
-
8/9/2019 Introduction About WPF
28/60
28
The WPF Command Model
The ICommand Interface The RoutedCommand Class
The RoutedUICommand Class
-
8/9/2019 Introduction About WPF
29/60
29
Executing Commands
Command Sources
-
8/9/2019 Introduction About WPF
30/60
30
Executing Commands
Command Bindings
// Create the binding.
CommandBinding
inding
new CommandBinding(Appli ati nCommands.New);// Attach the event handler.binding.
ut d +=
Command_Executed;// Register the binding.t
i
.CommandBinding
.Add(binding);
-
8/9/2019 Introduction About WPF
31/60
31
Advanced Commands
Custom Commands Using the Same Command in Different
Places
Using a Command
Parameter
Tracking and Reversing Commands
DO IT YOURSE F
-
8/9/2019 Introduction About WPF
32/60
32
Short introduction about Resources
AssemblyResources Object Resources
-
8/9/2019 Introduction About WPF
33/60
33
Need a font for all controls?
Times New Roman
18Bold
Customized Button
-
8/9/2019 Introduction About WPF
34/60
34
What do styles add to the picture?
We use style instead
Customized Button
-
8/9/2019 Introduction About WPF
35/60
35
Creating a Style Object
Setters Triggers
Resources
BasedOn TargetType
Example
-
8/9/2019 Introduction About WPF
36/60
36
Style Triggers
Trigger MultiTrigger
DataTrigger
MultiDataTrigger EventTrigger
Example
-
8/9/2019 Introduction About WPF
37/60
37
Control Templates - Logical Trees
-
8/9/2019 Introduction About WPF
38/60
38
Control Templates - Logical Trees
Windows
StackPanel
Button
String
Button
String
-
8/9/2019 Introduction About WPF
39/60
39
Control Templates - Visual Trees
Windows
StackPanel
utton
utton
Chrome
Content
Presenter
Text lock
String
utton
utton
Chrome
Content
Presenter
Text lock
String
-Alter oneof theelements in the vis
ual treeusing st les
- Createanew template for our control
Simple WindowExample
-
8/9/2019 Introduction About WPF
40/60
40
Control Templates
Want a window like this?
-
8/9/2019 Introduction About WPF
41/60
41
Creating Control Templates
A Simple Button
-
8/9/2019 Introduction About WPF
42/60
42
Template Triggers
Need more visual effect?
Example Simple Button
-
8/9/2019 Introduction About WPF
43/60
43
TEMPLATES VS. STYLES
Both allow you to chan e theappearance of an element
Slyle cant change visual tree
-
8/9/2019 Introduction About WPF
44/60
44
Advanced Templates
Organizing Template Resources Building More Complex Templates
DO IT YOURSE F
-
8/9/2019 Introduction About WPF
45/60
45
Data Binding
is extract some information from a sourceobjectand use it to set a property in a
target object
Example Binding to the Properties of an
Element.
-
8/9/2019 Introduction About WPF
46/60
46
Binding Direction
OneWay TwoWay
OneTime
OneWayToSource Default
-
8/9/2019 Introduction About WPF
47/60
47
Binding Updates
PropertyChanged LostFocus
Explicit
Default
-
8/9/2019 Introduction About WPF
48/60
48
Binding to Objects That Arent Elements
The only requirement is that the informationyou want to display must be stored inpublic
properties
Use 1 of 3 options:
Source
RelativeSource
DataContext
-
8/9/2019 Introduction About WPF
49/60
49
Binding using Source
Calibri
-
8/9/2019 Introduction About WPF
50/60
50
Binding using RelativeSource
-
8/9/2019 Introduction About WPF
51/60
51
Binding using DataContext
When many elements bind to 1 object
.
-
8/9/2019 Introduction About WPF
52/60
52
Binding to a Collection ofObjects
3 properties: ItemsSource
DisplayMemberPath
ItemTemplate
Demo
-
8/9/2019 Introduction About WPF
53/60
53
Data Conversion
Implements IValueConverter Add the [ValueConversion] attribute
Implement a Convert() method
Implement a
ConvertBack() method
Demo
-
8/9/2019 Introduction About WPF
54/60
54
Data Template
to customize the way each item is shown inan ItemsControl
is a chunk ofXAML markup that defines
how a bound data object should be
displayed
ItemsControl: ListView, ListBox, ComboBox, etc
ContentControl: Panel, etc
-
8/9/2019 Introduction About WPF
55/60
55
DataTemplate Example
-
8/9/2019 Introduction About WPF
56/60
56
Second DataTemplate Example
View Demo
-
8/9/2019 Introduction About WPF
57/60
57
Varying Templates
Use a data trigger
Use a value converter
Use a template selector
-
8/9/2019 Introduction About WPF
58/60
58
Template Selectors
Inherit class DataTemplateSelector
Implement method SelectTemplate()
Vie Demo
-
8/9/2019 Introduction About WPF
59/60
59
Templates and Selection
If you select an item in the list, WPFautomatically sets the Foreground and
Background properties of the item container
Vie Demo
-
8/9/2019 Introduction About WPF
60/60
60
Exercise & Question?