Introduction to WPF
Next Generation for Desktop Applications
Doncho Minkov
Technical Trainer
http://www.minkov.it
Telerik School Academy
schoolacademy.telerik.com
Table of Contents
1.
What is Windows Presentation Foundation
(WPF)?
2.
WPF basic features
3.
WPF and other UI technologies
 Windows Forms
 DirectX
 Silverlight
 HTML + CSS
2
Table of Contents (2)
4.
WPF architecture
5.
WPF core assemblies
6.
WPF namespaces
7.
WPF classes
8.
XAML basics
3
What is Windows
Presentation Foundation?
What is Windows
Presentation Foundation?
 Windows Presentation
Foundation (WPF)
 An entirely new graphical display system for
Windows
 Empowers rich-media applications
 Provides a clear separation between the UI
(XAML) and the business logic (C#,VB.NET)
 Influenced by modern display technologies such
as HTML, CSS and Flash
 Hardware-accelerated
5
WPF Basic Features
Vector Graphics
 All WPF graphics
are Direct3D applications
 Direct3D (part of DirectX) is used in graphical
applications where performance is important
 Uses the video card hardware for rendering
 The result: high-quality rich-media UI
 Vector-based graphics
allows to scale without
loss of quality
 WPF implements a floating-point logical pixel
system and supports 32-bit ARGB color
7
Rich Text Model
 WPF includes a number of extremely rich
typographic and text rendering features
 Some of them were not available in GDI
 Building
international fonts from composite
fonts
 WPF text rendering takes advantage of
ClearType technology
 Use caching of pre-rendered text in the video
memory
 WPF has resolution-independent architecture
8
Animation
 WFP supports time-based animations
 Presentation timers are initialized and
managed by WPF
 Scene changes coordinated by using a
storyboard
 Animations can be triggered
 By other external events
 Including user action
 Animation can be defined on a per-object basis
directly from the XAML markup
9
Audio and Video Support
 WPF can incorporate
audio and video into a
user interface
 Audio support in WPF is a thin layer
over the
existing functionality in Win32 and WMP
 WPF supports the video in formats WMV,
MPEG and some AVI files
 Relationship between video and animation is
also supported
 They are both ways of showing moving images
 Animation can be synchronized with media
10
Styles and Templates
 In WPF a style
is a set of properties applied to
content used for visual rendering
 Similar to the concept of CSS
 E.g. setting the font weight of a Button control
 Use them to standardize
non-formatting
characteristics
 WPF styles have specific features for building
applications
 Ability to apply different visual effects based on
user events
11
Styles and Templates (2)
 Templates in WPF allow
you to fully change
the UI of anything in WPF
 Kinds of templates available
within WPF
 ControlTemplate
 ItemsPanelTemplate
 DataTemplate
 HierarchicalDataTemplate
12
Commands
 Commands are more abstract
and loosely-
coupled version of events
 Examples: copy, cut, paste, save, etc.
 WPF support for commands reduces the
amount of code we need to write
 It gives us more flexibility
to change the UI
without breaking the back-end logic
 Commands have action, source, target and
binding
13
Commands (2)
 The power of commands comes from the
following three features
 WPF defines a number of built-in commands
 Commands have automatic support for input
actions
 Some WPF controls have built-in behavior tied
to various commands
 Commands are intended to do two things:
 Check whether an action is available
 Execute an action
14
Declarative UI with XAML
 WPF introduces a new XML-based language
for describing UI elements known as XAML
 XAML = eXtensible Application Markup
Language
 XAML is a completely declarative
language
 A declarative language says "what"
 An imperative language says "how"
 XAML describes the behavior and integration
of components (in most cases UI components)
15
Object-Based Drawing

At the lower-level WPF works in terms of shapes,
not in terms of painting pixels
 Shapes are vector-based and can easily scale

Developers create shape objects and let WPF
maintain the display in the most optimized way
 WPF provides a number of ready-to-use shape
objects like line, rectangle, ellipse, path, etc.

Shape objects can be used inside panels and
inside most WPF controls
16
WPF and Other UI
Technologies
Windows Forms
 Windows Forms is the culmination of the
display technology built on GDI+ and User32
 It’s more mature than WPF
 Has solid limitations
 No separation between UI and the C# code
 WPF is the platform for the future of Windows
development
 Based on DirectX and Direct3D
 Separation between the UI and C# code
18
DirectX
 WPF create multimedia applications
with real-
time graphics
 Such as complex physics-based simulators or
cutting-edge action games
 WPF applications
are DirectX applications
 As a result, even the most mundane business
applications can use rich effects and antialiasing
 WPF graphics
is entirely vector-based
 This allows zoom-in / soom-out with no loss of
quality
19
Silverlight
 Silverlight
is a cross-platform, cross-browser
plugin, which contains WPF-based technology
 Rich Internet Application (RIA) platform
 Including XAML and subset of WPF
 Provides rich-media features such as video,
vector graphics, and animations
 Silverlight
and WPF share the XAML
presentation layer
 Both technologies are similar, but Silverlight is
limited in many aspects
20
HTML + CSS vs. XAML + Styles
 Cascading Style Sheets (CSS) is a
stylesheet
language
 Used to describe the presentation of
information in HTML documents
 XAML elements have
Style property
 Similar to CSS (as a concept)
 The HTML and XAML are tag based systems to
describe UI
 XAML is more powerful in many aspects
21
XAML Basics
XAML Basics
 XAML is an XML-based language for creating
and initializing .NET objects
 It’s used in WPF as a human-authorable way of
describing the UI
 Used to separate the UI from the C# code
 XAML contains a hierarchy of elements
representing visual objects
 These objects are known as user interface
elements or UI elements
23
Elements and Attributes
 UI elements have a set of common properties
and functions
 Such as Width, Height, Cursor, and Tag
properties
 Declaring an XML element in XAML
 Equivalent to instantiating the object via a
parameterless constructor
 Setting an attribute
on the object element
 Equivalent to setting a property of the same
name
24
XAML Basics - Example
 Constructs
button with caption "OK"
<Window x:Class="MyFirstWpfApp.MainWindow" xmlns=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="Hello, WPF" Height="300" Width="300">
<Button x:Name="button"
Width="200"
Height="25">OK</Button>
</Window>
25
Example – Explanation
 The root element, Window is used to declare a
portion of a class
 The two XML namespace declarations pull
in
two commonly used namespaces
 The one for XAML itself
 The one for WPF
 Width, Height, Title are the XAML
properties
26
XAML Syntax
Live Demo
What is XAML?
What is XAML?
 eXtensible Application
Markup Language
 XAML is a declarative markup language
 Used to simplify creation of UI for a .NET apps
 Separates UI and Business logic
 XAML enables a workflow where different
parties can work simultaneously
 The UI and the logic of an application can be
developed using different tools (VS and Blend)
What is XAML? (2)
 XAML is an XML-based language for creating
and initializing .NET objects
 It’s used in WPF and Silverlight as a humanauthorable way of describing the UI
 Used to separate the UI from the C# code
 XAML contains a hierarchy of elements
representing visual objects
 These objects are known as user interface
elements or UI elements
30
Declarative UI with XAML
 XAML introduces a new XML-based language
for describing UI elements known as XAML
 XAML = eXtensible Application Markup
Language
 XAML is a completely declarative
language
 A declarative language says "what"
 An imperative language says "how"
 XAML describes the behavior and integration
of components (in most cases UI components)
31
Property Elements
 Not all
properties have just a string value
 Some must be set to an instance of an object
 XAML provide syntax
for setting complex
property values, called property elements
 Take the form TypeName.PropertyName
contained inside an TypeName element
A property element
<Ellipse>
<Ellipse.RenderTransform>
<RotateTransform Angle="45" CenterY="60" />
</Ellipse.RenderTransform>
</Ellipse>
33
Property Elements
Live Demo
Declarative vs.
Programmatically?
Why we need XAML?
 In WPF/Silverlight
Declarative vs.
Programmatically
each element can be done
either declaratively or programmatically
 No difference in the execution and speed
 Instantiating element from the code behind ruins
the idea of XAML
 The same as Windows Forms
 The following
two examples are identical
 With XAML
<Button Content="Click me!"/>
 From Code Behind
Button button=new Button();
button.Content="Click me!";
Declarative UI
 When not using XAML with WPF/Silverlight
 Miss the idea of separation of concerns
 Two parties cannot work simultaneously on the
same file
 What happens when making object
declaratively?
 It is the same as instantiating the element with
parameterless constructor
 All the magic happens in
InitializeComponents()
WPF vs. Windows Forms
 Windows Forms
 Framework to design applications with GUI
 Does the same job as WPF
 Everything is in one place
 Much like java's swings (by concept)
 Windows Presentation Foundation (WPF)
 Separate UI and Business Logic
 Why change the concept of the UI?
 In Windows Forms all the code is in one place
 Harder for front-end and back-end developers
Declarative or
Programmatically?
Live Demo
Introduction to XAML
Questions?