33
XAML Overview Markup for WPF and Silverlight Gaurav Goyal Janardan Chaudhary Nimesh Mishra Sanat Maharjan IOE Pulchwok Engineering College

xaml overview

Embed Size (px)

DESCRIPTION

A short overview of XAML.

Citation preview

Page 1: xaml overview

XAML OverviewMarkup for WPF and Silverlight

Gaurav GoyalJanardan ChaudharyNimesh MishraSanat Maharjan

IOE Pulchwok Engineering College

Page 2: xaml overview

WHAT IS XAML?

Page 3: xaml overview

WHAT IS XAML?

• Stands for eXtensible Application Markup Language

• Declarative markup language for building UI

• Based on XML

• Used to simplify creation of UI for a .NET apps

• Separates presentation (UI) from 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)

Page 4: xaml overview

DECLARATIVE UI WITH XAML

• 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)• Cannot describe business logic

Page 5: xaml overview

HISTORY OF XAML

• Introduced in 2006 with .NET 3.0• With Windows Presentation Foundation (WPF)• WPF is "the new way" to create desktop apps

• Successor of Windows Forms

• Silverlight is introduced in 2007• Under the name WPF/E - WPF Everywhere• Used JavaScript for back-end

• Windows Runtime (WinRT) introduced in 2011• Used for Windows Store apps• Closer to Silverlight than WPF

Page 6: xaml overview

XAML-RELATED TECHNOLOGIES

• Windows Presentation Foundation - WPF• The successor of Windows Forms• Uses XAML to describe the presentation (UI)• C# / VB.NET for the back-end logic

• Silverlight• Develop RIA in collaboration with ASP.NET• Browsers need a Silverlight plugin

• Windows Runtime - WinRT• Build Windows Store apps in Windows 8

Page 7: xaml overview

XAML FEATURES

Page 8: xaml overview

VECTOR GRAPHICS

• All XAML 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 allow lossless scaling

• XAML implements a floating-point logical pixel system and supports 32-bit ARGB color

Page 9: xaml overview

ANIMATION

• XAML supports time-based animations• Presentation timers are initialized and managed by

XAML• Scene changes are coordinated using a storyboard

• Animations can be triggered by external events• Including user action or events

• Animation can be defined on a per-object basis directly from the XAML markup

Page 10: xaml overview

AUDIO AND VIDEO SUPPORT

• XAML can incorporate audio and video into a user interface

• Audio support in XAML is a thin layer over the existing functionality in Win32 and WMP

• XAML supports the videos formats that the OS supports• i.e. if WMP can play a file – XAML can too

• Relationship between video and animation is also supported• They are both ways of showing moving images• Animation can be synchronized with media

Page 11: xaml overview

STYLES

• In XAML a style is a set of properties applied to the content used for visual rendering• Similar to the concept of CSS

• Use them to standardize non-formatting characteristics

• XAML styles have specific features • Ability to apply different visual effects based on user events• Styles are created using MS Expression Blend

11

Page 12: xaml overview

TEMPLATES

• Templates in XAML allow you to fully change the UI of anything in XAML

• Different templates available within XAML

• ControlTemplate• Manages the visualization of a control

• ItemsPanelTemplate• Handles the visualization panel of list control

• DataTemplate and

HierarchicalDataTemplate• Responsible for the visualization of items in list controls

12

Page 13: xaml overview

COMMANDS

• Commands are more abstract and loosely-coupled version of events• Examples: copy, cut, paste, save, etc.

• XAML 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

Page 14: xaml overview

COMMANDS (2)

• The power of commands:• XAML defines a number of built-in commands• Commands have automatic support for input

actions• Some XAML 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

Page 15: xaml overview

OBJECT-BASED DRAWING

• At the lower-level XAML works in terms of shapes, not in terms of painting pixels• Shapes are vector-based and are easily scaled

• Developers create shape objects and let XAML maintain the view in the most optimized way• XAML 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 XAML controls

15

Page 16: xaml overview

DECLARATIVE VS. PROGRAMMATICALLY?

Why we need XAML?

Page 17: xaml overview

DECLARATIVE VS. PROGRAMMATICALLY

• With XAML each element can be done either declaratively or programmatically• No difference in the execution or performance

• 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

With Code Behind

Page 18: xaml overview

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

Page 19: xaml overview

XAML SYNTAX

Page 20: xaml overview

XAML SYNTAX

• XAML stands for eXtensible Application Markup Language• i.e. uses syntax that is actually pure XML

• Very similar to HTML

• Meant to build applications' UI

• Briefly XAML consists of• Elements

• Properties

• Elements may have properties

Page 21: xaml overview

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 with the same name

• Elements and attributes are case sensitive

• The attributes can be enclosed in single quotes (') or double quotes (")

Page 22: xaml overview

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

22

<Ellipse> <Ellipse.RenderTransform> <RotateTransform Angle="45" CenterY="60" /> </Ellipse.RenderTransform></Ellipse>

A property element

Page 23: xaml overview

CONTENT PROPERTIES

• One of the element's properties is default• Known as content property• Typically contains the child elements

• Content properties are used without prefix:

23

<Border> <TextBox Width="300"/></Border><!-- Explicit equivalent --><Border> <Border.Child> <TextBox Width="300"/> </Border.Child></Border>

A content property

A property element

Page 24: xaml overview

ATTACHED PROPERTIES

• Attached properties are special kind of properties• Can be attached to any object

• Not just the one defining the property

• The syntax is the same as setting a normal property• The property must be prefixed with the name of the

element defining the property and a dot

24

Page 25: xaml overview

ATTACHED PROPERTIES (2)

• Attached properties allow common behavior to be applied to arbitrary elements• Allow a child item to access a property of its

parent item

• The base of Attached Behavior

• Commonly used attached properties:• Canvas.Left and Canvas.Right

• Grid.Row, Grid.Column and Grid.Rowspan

25

Page 26: xaml overview

ATTACHED PROPERTIES – EXAMPLE

• Using the Canvas.Left and Canvas.Top attached properties to position Ellipses• The default value is 0

26

<Canvas> <Ellipse Fill="Green" Width="80" Height="80"/> <Ellipse Canvas.Left="25" Canvas.Top="25" Fill="Red" Width="80" Height="80"/> <Ellipse Canvas.Left="50" Canvas.Top="50" Fill="Purple" Width="80" Height="80"/></Canvas><!-- The result is : -->

Page 27: xaml overview

DEPENDENCY PROPERTIES

• A Dependency Properties are properties that extend the functionality of a common language runtime (CLR) property

• Interact with properties directly and never know that they are implemented as a dependency property

• The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs

Page 28: xaml overview

DEPENDENCY PROPERTIES (2)

• A Dependency Property can be implemented to provide • Self-contained validation• Default values• Callbacks that monitor changes to other properties

• Example of Dependency Properties• Text property of TextBlock

<TextBox Name="TextBoxFrom"/><TextBlock Text="{ Binding ElementName=TextBoxFrom, Path=Text}"/>

Gets the Text from the TextBox

Page 29: xaml overview

XAML CONTROLS

• The controls are the smallest components of a XAML Application• Every control consists of

• Appearance

• Code-behind

Page 30: xaml overview

XAML CONTROL

• XAML Controls are typically not directly responsible for their own appearance• XAML Controls are all about behavior• They defer to templates to provide their visuals

Page 31: xaml overview

XAML CONTROLS (2)

• Controls may use commands to represent supported operations

• Controls offer properties to provide a means of modifying either behavior

• Controls raise events when something important happens

• XAML provides a range of built-in controls• Most of these correspond to standard Windows

control types

Page 32: xaml overview

ADVANTAGES OF XAML

• XAML code is short and clear to read

• Separation of designer code and logic

• Graphical design tools like Expression Blend require XAML as source.

• The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer