xaml overview
-
Upload
sanat-maharjan -
Category
Education
-
view
585 -
download
1
description
Transcript of xaml overview
XAML OverviewMarkup for WPF and Silverlight
Gaurav GoyalJanardan ChaudharyNimesh MishraSanat Maharjan
IOE Pulchwok Engineering College
WHAT IS XAML?
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)
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
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
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
XAML FEATURES
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
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
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
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
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
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
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
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
DECLARATIVE VS. PROGRAMMATICALLY?
Why we need XAML?
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
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()
XAML SYNTAX
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
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 (")
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
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
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
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
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 : -->
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
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
XAML CONTROLS
• The controls are the smallest components of a XAML Application• Every control consists of
• Appearance
• Code-behind
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
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
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
?
?? ? ?
??? ?
?
?
?
??
?
?
? ?
Questions?