Next Generation for Desktop Applications Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer

1. What is Windows Presentation Foundation (WPF)? 2. WPF basic features 3. WPF and other UI technologies  Windows Forms  DirectX  Silverlight  HTML + CSS 2

4. WPF architecture 5. WPF core assemblies 6. WPF namespaces 7. WPF classes 8. XAML basics 3

 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

 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

 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

 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

 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

 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

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

 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

 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

 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

 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

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

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

 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

 Constructs button with caption "OK" 25 <Window x:Class="MyFirstWpfApp.MainWindow" xmlns= " " xmlns:x= xmlns:x= Title="Hello, WPF" Height="300" Width="300"> Title="Hello, WPF" Height="300" Width="300"> <Button x:Name="button" <Button x:Name="button" Width="200" Width="200" Height="25">OK Height="25">OK </Window>

 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

Live Demo

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

 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

 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

 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> A property element

Live Demo

Why we need XAML?

 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 button=new Button(); button.Content="Click me!";  With XAML  From Code Behind

 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()

 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

Live Demo

Questions?