Next Generation for Desktop Applications Doncho Minkov Telerik School Academy Technical Trainer

  • View
    214

  • Download
    0

Embed Size (px)

Text of Next Generation for Desktop Applications Doncho Minkov Telerik School Academy Technical Trainer

Introduction to XAML

Introduction to WPFNext Generation for Desktop Applications Doncho MinkovTelerik School Academyschoolacademy.telerik.com Technical Trainerhttp://www.minkov.it

http://schoolacademy.telerik.comTable of ContentsWhat is Windows Presentation Foundation (WPF)?WPF basic featuresWPF and other UI technologiesWindows Forms DirectXSilverlight HTML + CSS2

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*2##Table of Contents (2)WPF architectureWPF core assembliesWPF namespacesWPF classesXAML basics3

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*3##What is Windows Presentation Foundation?

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*4##What is Windows Presentation Foundation?Windows Presentation Foundation (WPF)An entirely new graphical display system for WindowsEmpowers rich-media applicationsProvides a clear separation between the UI (XAML) and the business logic (C#,VB.NET)Influenced by modern display technologies such as HTML, CSS and FlashHardware-accelerated5WPF Basic Features

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*6##Vector Graphics All WPF graphics are Direct3D applicationsDirect3D (part of DirectX) is used in graphical applications where performance is importantUses the video card hardware for renderingThe result: high-quality rich-media UIVector-based graphics allows to scale without loss of qualityWPF implements a floating-point logical pixel system and supports 32-bit ARGB color7Rich Text Model WPF includes a number of extremely rich typographic and text rendering featuresSome of them were not available in GDIBuilding international fonts from composite fontsWPF text rendering takes advantage of ClearType technologyUse caching of pre-rendered text in the video memory WPF has resolution-independent architecture8Animation WFP supports time-based animationsPresentation timers are initialized and managed by WPFScene changes coordinated by using a storyboardAnimations can be triggeredBy other external eventsIncluding user actionAnimation can be defined on a per-object basis directly from the XAML markup 9Audio and Video Support WPF can incorporate audio and video into a user interfaceAudio support in WPF is a thin layer over the existing functionality in Win32 and WMPWPF supports the video in formats WMV, MPEG and some AVI files Relationship between video and animation is also supportedThey are both ways of showing moving imagesAnimation can be synchronized with media10Styles and Templates In WPF a style is a set of properties applied to content used for visual renderingSimilar to the concept of CSSE.g. setting the font weight of a Button controlUse them to standardize non-formatting characteristicsWPF styles have specific features for building applicationsAbility to apply different visual effects based on user events11Styles and Templates (2)Templates in WPF allow you to fully change the UI of anything in WPFKinds of templates available within WPFControlTemplateItemsPanelTemplateDataTemplateHierarchicalDataTemplate12Commands Commands are more abstract and loosely-coupled version of eventsExamples: copy, cut, paste, save, etc.WPF support for commands reduces the amount of code we need to writeIt gives us more flexibility to change the UI without breaking the back-end logicCommands have action, source, target and binding13Commands (2)The power of commands comes from the following three featuresWPF defines a number of built-in commandsCommands have automatic support for input actionsSome WPF controls have built-in behavior tied to various commandsCommands are intended to do two things:Check whether an action is availableExecute an action14Declarative UI with XAML WPF introduces a new XML-based language for describing UI elements known as XAMLXAML = eXtensible Application Markup LanguageXAML is a completely declarative languageA declarative language says "what"An imperative language says "how"XAML describes the behavior and integration of components (in most cases UI components)15Object-Based Drawing At the lower-level WPF works in terms of shapes, not in terms of painting pixelsShapes are vector-based and can easily scaleDevelopers create shape objects and let WPF maintain the display in the most optimized wayWPF 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 controls16WPF and Other UI Technologies

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*17##Windows FormsWindows Forms is the culmination of the display technology built on GDI+ and User32Its more mature than WPFHas solid limitationsNo separation between UI and the C# codeWPF is the platform for the future of Windows developmentBased on DirectX and Direct3DSeparation between the UI and C# code18DirectXWPF create multimedia applications with real-time graphicsSuch as complex physics-based simulators or cutting-edge action gamesWPF applications are DirectX applicationsAs a result, even the most mundane business applications can use rich effects and antialiasingWPF graphics is entirely vector-basedThis allows zoom-in / soom-out with no loss of quality19SilverlightSilverlight is a cross-platform, cross-browser plugin, which contains WPF-based technologyRich Internet Application (RIA) platformIncluding XAML and subset of WPFProvides rich-media features such as video, vector graphics, and animationsSilverlight and WPF share the XAML presentation layerBoth technologies are similar, but Silverlight is limited in many aspects20HTML + CSS vs. XAML + StylesCascading Style Sheets (CSS) is a stylesheet languageUsed to describe the presentation of information in HTML documentsXAML elements have Style propertySimilar to CSS (as a concept)The HTML and XAML are tag based systems to describe UIXAML is more powerful in many aspects21XAML Basics

*22.02.201207/16/96(c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*22##XAML BasicsXAML is an XML-based language for creating and initializing .NET objectsIts used in WPF as a human-authorable way of describing the UIUsed to separate the UI from the C# codeXAML contains a hierarchy of elements representing visual objectsThese objects are known as user interface elements or UI elements23Elements and AttributesUI elements have a set of common properties and functionsSuch as Width, Height, Cursor, and Tag propertiesDeclaring an XML element in XAMLEquivalent to instantiating the object via a parameterless constructorSetting an attribute on the object elementEquivalent to setting a property of the same name24XAML Basics - ExampleConstructs button with caption "OK"25

OK

Example ExplanationThe root element, Window is used to declare a portion of a classThe two XML namespace declarations pull in two commonly used namespacesThe one for XAML itselfThe one for WPFWidth, Height, Title are the XAML properties26XAML SyntaxLive DemoWhat is XAML?

What is XAML?eXtensible Application Markup LanguageXAML is a declarative markup languageUsed to simplify creation of UI for a .NET apps Separates UI and Business logicXAML enables a workflow where different parties can work simultaneouslyThe 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 objectsIts used in WPF and Silverlight as a human-authorable way of describing the UIUsed to separate the UI from the C# codeXAML contains a hierarchy of elements representing visual objectsThese objects are known as user interface elements or UI elements30Declarative UI with XAML XAML introduces a new XML-based language for describing UI elements known as XAMLXAML = eXtensible Application Markup LanguageXAML is a completely declarative languageA declarative language says "what"An imperative language says "how"XAML describes the behavior and integration of components (in most cases UI components)31Property Elements

*(c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*32##Property ElementsNot all properties have just a string valueSome must be set to an instance of an objectXAML provide syntax for setting complex property values, called property elementsTake the form TypeName.PropertyName contained inside an TypeName element33

A property elementProperty ElementsLive Demo

*(c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*34##Declarative vs. Programmatically?Why we need XAML?Declarative vs. ProgrammaticallyIn WPF/Silverlight each element can be done either declaratively or programmaticallyNo difference in the execution and speedInstantiating element from the code behind ruins the idea of XAMLThe same as Windows FormsThe following two examples are identical

Button button=new Button();button.Content="Click me!";With XAMLFrom Code BehindDeclarative UIWhen not using XAML with WPF/SilverlightMiss the idea of separation of concernsTwo parties cannot work simultan