View
1.334
Download
5
Category
Tags:
Preview:
DESCRIPTION
Introduction to WPFTelerik Software Academy: http://academy.telerik.com/school-academy/meetings/details/2012/02/02/desktop-applications-csharp-wpfThe website and all video materials are in Bulgarian.What is Windows Presentation Foundation (WPF)?WPF basic featuresWPF and other UI technologiesWindows Forms DirectXSilverlight HTML + CSSWPF architectureWPF core assembliesWPF namespacesWPF classesXAML basics
Citation preview
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
http://academy.telerik.com/
Introduction to WPFNext Generation for Desktop Applications
Table of Contents1. 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 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 name
24
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
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
Introduction to XAML
Free Trainings @ Telerik Academy
Desktop Applications with C# and WPF academy.telerik.com/
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com
Recommended