Transcript Introduction to XAML
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.
2.
3.
What is Windows Presentation Foundation (WPF)?
WPF basic features WPF and other UI technologies
Windows Forms
DirectX
Silverlight
HTML + CSS
2
Table of Contents (2)
4.
5.
6.
7.
8.
WPF architecture WPF core assemblies WPF namespaces WPF classes 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"
25
Example – Explanation
The root element, Window portion of a class is used to declare a
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?
e X tensible A pplication M arkup L anguage
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
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
33
Property Elements
Live 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
With XAML
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