Introduction to WPFNext Generation for Desktop Applications

Doncho Minkov

Telerik School Academyschoolacademy.telerik.com

Technical Trainerhttp://www.minkov.it

http://schoolacademy.telerik.com

Table of Contents1. What is Windows Presentation

Foundation (WPF)?2. WPF basic features3. WPF and other UI technologies

Windows Forms DirectX Silverlight HTML + CSS

2

Table of Contents (2)4. WPF architecture5. WPF core assemblies6. WPF namespaces7. WPF classes8. 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 elements23

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 name24

XAML Basics - Example Constructs button with caption "OK"

25

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

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

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

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

33

<Ellipse> <Ellipse.RenderTransform> <RotateTransform Angle="45" CenterY="60" /> </Ellipse.RenderTransform></Ellipse>

A property element

Property ElementsLive Demo

Declarative vs. Programmatically?

Why we need XAML?

Declarative vs. Programmatically In WPF/Silverlight 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<Button Content="Click me!"/>

Button button=new Button();button.Content="Click me!";

With XAML

From Code Behind

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

Questions?

Introduction to XAML