Introduction to WPF

Next Generation for Desktop Applications

[email protected]
[email protected]
Credits: Telerik
 Table of Contents
1. Windows Presentation Foundation (WPF)?
2. WPF basic features
3. WPF and other UI technologies
 Windows Forms
 DirectX
 Silverlight
 HTML + CSS
4. WPF classes
5. XAML basics
2
 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
4
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
6
 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
7
 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
8
 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
 Relationshipbetween video and animation is
also supported
 They are both ways of showing moving images
 Animation can be synchronized with media
9
 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 10
 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

11
 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
12
 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
13
 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)
14
 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

15
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
17
 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
18
 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
19
 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
20
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

22
 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
23
 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>

24
 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

25
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 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

29
 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)
30
 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>
32
Property Elements
Live Demo
 Declarative vs.
Programmatically?
Why we need XAML?
 Declarative vs.
Programmatically
 In WPF/Silverlighteach 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  From Code Behind

<Button Content="Click me!"/> 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
Questions?