1 / 40

Introduction to WPF

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. Table of Contents. What is Windows Presentation Foundation (WPF)? WPF basic features

bcameron
Download Presentation

Introduction to WPF

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related