SlideShare ist ein Scribd-Unternehmen logo
1 von 33
XAML Overview
Markup for WPF and Silverlight
Gaurav Goyal
Janardan Chaudhary
Nimesh Mishra
Sanat 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
xaml overview

Weitere ähnliche Inhalte

Was ist angesagt?

Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)WSO2
 
Unit 4- Software Engineering System Model Notes
Unit 4- Software Engineering System Model Notes Unit 4- Software Engineering System Model Notes
Unit 4- Software Engineering System Model Notes arvind pandey
 
Introduction to Software Engineering
Introduction to Software EngineeringIntroduction to Software Engineering
Introduction to Software EngineeringZahoor Khan
 
Approaches to CSS Layout
Approaches to CSS LayoutApproaches to CSS Layout
Approaches to CSS LayoutNicole Ryan
 
Windows form application - C# Training
Windows form application - C# Training Windows form application - C# Training
Windows form application - C# Training Moutasm Tamimi
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
Dotnet Basics Presentation
Dotnet Basics PresentationDotnet Basics Presentation
Dotnet Basics PresentationSudhakar Sharma
 
Presentation on component based software engineering(cbse)
Presentation on component based software engineering(cbse)Presentation on component based software engineering(cbse)
Presentation on component based software engineering(cbse)Chandan Thakur
 
Software Engineering - chp4- design patterns
Software Engineering - chp4- design patternsSoftware Engineering - chp4- design patterns
Software Engineering - chp4- design patternsLilia Sfaxi
 
FrameMaker and the DITA Open Toolkit
FrameMaker and the DITA Open ToolkitFrameMaker and the DITA Open Toolkit
FrameMaker and the DITA Open ToolkitContrext Solutions
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design pptfarazimlak
 

Was ist angesagt? (20)

Asp.net.
Asp.net.Asp.net.
Asp.net.
 
WPF
WPFWPF
WPF
 
Increment model
Increment modelIncrement model
Increment model
 
Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)Service-Oriented Architecture (SOA)
Service-Oriented Architecture (SOA)
 
UML
UMLUML
UML
 
Architectural design
Architectural designArchitectural design
Architectural design
 
Unit 4- Software Engineering System Model Notes
Unit 4- Software Engineering System Model Notes Unit 4- Software Engineering System Model Notes
Unit 4- Software Engineering System Model Notes
 
Introduction to .NET Framework
Introduction to .NET FrameworkIntroduction to .NET Framework
Introduction to .NET Framework
 
Software Architecture
Software ArchitectureSoftware Architecture
Software Architecture
 
Introduction to Software Engineering
Introduction to Software EngineeringIntroduction to Software Engineering
Introduction to Software Engineering
 
Approaches to CSS Layout
Approaches to CSS LayoutApproaches to CSS Layout
Approaches to CSS Layout
 
Windows form application - C# Training
Windows form application - C# Training Windows form application - C# Training
Windows form application - C# Training
 
The Modern Software Architect
The Modern Software ArchitectThe Modern Software Architect
The Modern Software Architect
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Dotnet Basics Presentation
Dotnet Basics PresentationDotnet Basics Presentation
Dotnet Basics Presentation
 
Presentation on component based software engineering(cbse)
Presentation on component based software engineering(cbse)Presentation on component based software engineering(cbse)
Presentation on component based software engineering(cbse)
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
Software Engineering - chp4- design patterns
Software Engineering - chp4- design patternsSoftware Engineering - chp4- design patterns
Software Engineering - chp4- design patterns
 
FrameMaker and the DITA Open Toolkit
FrameMaker and the DITA Open ToolkitFrameMaker and the DITA Open Toolkit
FrameMaker and the DITA Open Toolkit
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design ppt
 

Andere mochten auch

Presentation wpf
Presentation wpfPresentation wpf
Presentation wpfdanishrafiq
 
2 Day - WPF Training by Adil Mughal
2 Day - WPF Training by Adil Mughal2 Day - WPF Training by Adil Mughal
2 Day - WPF Training by Adil MughalAdil Mughal
 
Introduction To Xaml
Introduction To XamlIntroduction To Xaml
Introduction To Xamlphoooo
 
WCF Security, FSec
WCF Security, FSecWCF Security, FSec
WCF Security, FSecAnte Gulam
 
WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)Prashanth Shivakumar
 
WPF For Beginners - Learn in 3 days
WPF For Beginners  - Learn in 3 daysWPF For Beginners  - Learn in 3 days
WPF For Beginners - Learn in 3 daysUdaya Kumar
 
C# Tutorial
C# Tutorial C# Tutorial
C# Tutorial Jm Ramos
 

Andere mochten auch (10)

Introduction to wpf
Introduction to wpfIntroduction to wpf
Introduction to wpf
 
Presentation wpf
Presentation wpfPresentation wpf
Presentation wpf
 
WPF Basics
WPF BasicsWPF Basics
WPF Basics
 
2 Day - WPF Training by Adil Mughal
2 Day - WPF Training by Adil Mughal2 Day - WPF Training by Adil Mughal
2 Day - WPF Training by Adil Mughal
 
Introduction To Xaml
Introduction To XamlIntroduction To Xaml
Introduction To Xaml
 
WCF Security, FSec
WCF Security, FSecWCF Security, FSec
WCF Security, FSec
 
WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)WPF (Windows Presentation Foundation Unit 01)
WPF (Windows Presentation Foundation Unit 01)
 
WPF For Beginners - Learn in 3 days
WPF For Beginners  - Learn in 3 daysWPF For Beginners  - Learn in 3 days
WPF For Beginners - Learn in 3 days
 
C# basics
 C# basics C# basics
C# basics
 
C# Tutorial
C# Tutorial C# Tutorial
C# Tutorial
 

Ähnlich wie xaml overview

Wpf-Xaml And Layout Basics
Wpf-Xaml And Layout BasicsWpf-Xaml And Layout Basics
Wpf-Xaml And Layout BasicsRobin Aggarwal
 
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5Amira Gamal
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin formsSolTech, Inc.
 
Web Atoms - More Markup - Less Script
Web Atoms - More Markup - Less ScriptWeb Atoms - More Markup - Less Script
Web Atoms - More Markup - Less ScriptAkash Kava
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAndres Baravalle
 
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friendFilip Bruun Bech-Larsen
 
Ballerina- A programming language for the networked world
Ballerina- A programming language for the networked worldBallerina- A programming language for the networked world
Ballerina- A programming language for the networked worldIntegration Meetups
 
Ballerina- A programming language for the networked world
Ballerina- A programming language for the networked worldBallerina- A programming language for the networked world
Ballerina- A programming language for the networked worldAsangi Jasenthuliyana
 
AlgorithmVisualiserProject_TanuJaiswal.pdf
AlgorithmVisualiserProject_TanuJaiswal.pdfAlgorithmVisualiserProject_TanuJaiswal.pdf
AlgorithmVisualiserProject_TanuJaiswal.pdfTanu Jaiswal
 
Typesafe stack - Scala, Akka and Play
Typesafe stack - Scala, Akka and PlayTypesafe stack - Scala, Akka and Play
Typesafe stack - Scala, Akka and PlayLuka Zakrajšek
 
Web programming and services
Web programming and servicesWeb programming and services
Web programming and serviceslaibamaqsood
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Salesforce Developers
 
Flex introduction
Flex introductionFlex introduction
Flex introductioniamprajyot
 

Ähnlich wie xaml overview (20)

SilverlightDevIntro
SilverlightDevIntroSilverlightDevIntro
SilverlightDevIntro
 
Wpf-Xaml And Layout Basics
Wpf-Xaml And Layout BasicsWpf-Xaml And Layout Basics
Wpf-Xaml And Layout Basics
 
Actors evolved- Rotem Hermon
Actors evolved- Rotem HermonActors evolved- Rotem Hermon
Actors evolved- Rotem Hermon
 
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
MSTC'14 (Window Phone +Windows 8 ) Workshops_Day 5
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin forms
 
Web Atoms - More Markup - Less Script
Web Atoms - More Markup - Less ScriptWeb Atoms - More Markup - Less Script
Web Atoms - More Markup - Less Script
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Webcomponents are your frameworks best friend
Webcomponents are your frameworks best friendWebcomponents are your frameworks best friend
Webcomponents are your frameworks best friend
 
UML Intro
UML IntroUML Intro
UML Intro
 
Ballerina- A programming language for the networked world
Ballerina- A programming language for the networked worldBallerina- A programming language for the networked world
Ballerina- A programming language for the networked world
 
Ballerina- A programming language for the networked world
Ballerina- A programming language for the networked worldBallerina- A programming language for the networked world
Ballerina- A programming language for the networked world
 
Uml basics
Uml basicsUml basics
Uml basics
 
AlgorithmVisualiserProject_TanuJaiswal.pdf
AlgorithmVisualiserProject_TanuJaiswal.pdfAlgorithmVisualiserProject_TanuJaiswal.pdf
AlgorithmVisualiserProject_TanuJaiswal.pdf
 
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der LindenAMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
AMIS OOW 2012 Review - Deel 4 ADF - Paco van der Linden
 
Typesafe stack - Scala, Akka and Play
Typesafe stack - Scala, Akka and PlayTypesafe stack - Scala, Akka and Play
Typesafe stack - Scala, Akka and Play
 
Web programming and services
Web programming and servicesWeb programming and services
Web programming and services
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1
 
Silver Light1.0
Silver Light1.0Silver Light1.0
Silver Light1.0
 
Why XAF and XPO?
Why XAF and XPO?Why XAF and XPO?
Why XAF and XPO?
 
Flex introduction
Flex introductionFlex introduction
Flex introduction
 

Mehr von Sanat Maharjan

Automate+ Final Report
Automate+ Final ReportAutomate+ Final Report
Automate+ Final ReportSanat Maharjan
 
Automate+ Final Presentation
Automate+ Final PresentationAutomate+ Final Presentation
Automate+ Final PresentationSanat Maharjan
 
Network protocol structure scope
Network protocol structure scopeNetwork protocol structure scope
Network protocol structure scopeSanat Maharjan
 
Chap 6 IMplementation of Information System
Chap 6 IMplementation of Information SystemChap 6 IMplementation of Information System
Chap 6 IMplementation of Information SystemSanat Maharjan
 
Chapter 6 Information System-Critical Success Factor
Chapter 6 Information System-Critical Success FactorChapter 6 Information System-Critical Success Factor
Chapter 6 Information System-Critical Success FactorSanat Maharjan
 

Mehr von Sanat Maharjan (7)

Automate+ Final Report
Automate+ Final ReportAutomate+ Final Report
Automate+ Final Report
 
Automate+ Final Presentation
Automate+ Final PresentationAutomate+ Final Presentation
Automate+ Final Presentation
 
Network protocol structure scope
Network protocol structure scopeNetwork protocol structure scope
Network protocol structure scope
 
Chap 6 IMplementation of Information System
Chap 6 IMplementation of Information SystemChap 6 IMplementation of Information System
Chap 6 IMplementation of Information System
 
Chapter 6 Information System-Critical Success Factor
Chapter 6 Information System-Critical Success FactorChapter 6 Information System-Critical Success Factor
Chapter 6 Information System-Critical Success Factor
 
AutoMate+
AutoMate+AutoMate+
AutoMate+
 
FarMate
FarMateFarMate
FarMate
 

Kürzlich hochgeladen

COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jisc
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfDr Vijay Vishwakarma
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxJisc
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 

Kürzlich hochgeladen (20)

COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 

xaml overview

  • 1. XAML Overview Markup for WPF and Silverlight Gaurav Goyal Janardan Chaudhary Nimesh Mishra Sanat Maharjan IOE Pulchwok Engineering College
  • 3. 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)
  • 4. 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
  • 5. 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
  • 6. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 17. 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
  • 18. 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()
  • 20. 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
  • 21. 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 (")
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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 : -->
  • 27. 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
  • 28. 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
  • 29. XAML CONTROLS • The controls are the smallest components of a XAML Application • Every control consists of • Appearance • Code-behind
  • 30. 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
  • 31. 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
  • 32. 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