Introduction to WPF

1. http://schoolacademy.telerik.com Introduction to WPF Next Generation for Desktop Applications Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer http://www.minkov.it

2. Table of Contents • What is Windows Presentation Foundation (WPF)? • WPF basic features • WPF and other UI technologies • Windows Forms • DirectX • Silverlight • HTML+CSS

3. Table of Contents (2) • WPF architecture • WPF core assemblies • WPF namespaces • WPF classes • XAML basics

4. What is Windows Presentation Foundation?

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

6. WPF Basic Features

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

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

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

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

11. 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 Buttoncontrol • 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

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

13. Commands • Commandsare 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

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

15. 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)

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

17. WPF and Other UI Technologies

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

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

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

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

22. XAML Basics

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

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

25. 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"> <Buttonx:Name="button" Width="200" Height="25">OK</Button> </Window>

26. 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 XAMLproperties

27. XAML Syntax Live Demo

28. What is XAML?

29. What is XAML? • eXtensibleApplication 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)

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

31. 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)

32. Property Elements

33. 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.PropertyNamecontained inside an TypeNameelement A property element <Ellipse> <Ellipse.RenderTransform> <RotateTransform Angle="45" CenterY="60" /> </Ellipse.RenderTransform> </Ellipse>

34. Property Elements Live Demo

35. Declarative vs. Programmatically? Why we need XAML?

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

37. 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 parameterlessconstructor • All the magic happens in InitializeComponents()

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

39. Declarative or Programmatically? Live Demo

40. Introduction to XAML