Embed Size (px)
DESCRIPTION
Extensible Application Markup Language, better known as XAML (pronounced “zammel”), is a language developed by Microsoft that is based on XML. It provides a declarative way to instantiate rich object graphs – in other words, through XAML you are able to create instances of classes, set properties, and define behaviors. Most commonly used to describe the user interface for technologies like Silverlight, WPF, and Windows 8.1, XAML provides a separation of concerns between the presentation and business logic for an app and gives the designer the flexibility to create experiences that interact with code through data-binding. This enables design-time data and true parallel workflows between designers and developers. Jeremy Likness will walk you through XAML, including how it is used by various technologies and the advantages it provides when building applications.
Citation preview
Consulting/Training
Jeremy Likness
Principal Consultant
@JeremyLikness
My XML is Alive! (An Intro to XAML)
Consulting/Training
consultingWintellect helps you build better software, faster, tackling the tough projects and solving the software and technology questions that help you transform your business. Architecture, Analysis and Design Full lifecycle software development Debugging and Performance tuning Database design and development
trainingWintellect's courses are written and taught by some of the biggest and most respected names in the Microsoft programming industry. Learn from the best. Access the same
training Microsoft’s developers enjoy Real world knowledge and solutions
on both current and cutting edge technologies
Flexibility in training options – onsite, virtual, on demand
Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions.
who we are
About Wintellect
Consulting/Training
Imperative to Declare XAML Data-binding Notify Property Change Design-time Data The Visual Tree Value Converters Dependency Objects and Properties Attached Properties and Behaviors The Visual State Manager MVVM
Agenda
Consulting/Training
Imperative programming is the traditional approach to writing code. You just … write it.
Declarative programming lets you focus more on structure or tasks and leaves the solution to the compiler (or interpreter, or runtime).
Imperative is more testable and gives you more control over the implementation details.
Declarative tends to be more readable and accessible to non-developers (such as designers).
Imperative to Declare
Consulting/Training
// imperative (long)
var productNames = new List<string>();
foreach(var p in Products)
{
if (p.Price <= 9.99)
{
productNames.Add(p.ProductName);
}
}
// a little of both (short with LINQ)
var productNames =
from p in Products
where p.Price <= 9.99
select p.ProductName;
// declarative (long with LINQ)
var productNames = Products.Where(p => p.Price <= 9.99).Select(p => p.ProductName);
Example of Imperative vs. Declarative
How to filter the product
How to project the product name
What to filter
What to project
Consulting/Training
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="myBindingConfiguration" closeTimeout="00:01:00" />
</basicHttpBinding>
</bindings>
<services>
<service name="MyNamespace.myServiceType">
<endpoint
address="myAddress" binding="basicHttpBinding"
bindingConfiguration="myBindingConfiguration"
contract="MyContract" />
</service>
</services>
</system.serviceModel>
</configuration>
WCF can be Declarative…
What, what, and what
Consulting/Training
BasicHttpBinding myBinding = new BasicHttpBinding();
EndpointAddress myEndpoint = new EndpointAddress("myAddress");
ChannelFactory<MyContract> myChannelFactory = new ChannelFactory<MyContract>(myBinding, myEndpoint);
MyContract wcfClient = myChannelFactory.CreateChannel();
…or WCF can be Imperative
How, how, how …
Consulting/Training
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>I Hereby Declare</title>
<meta name="description" content="I Hereby Declare">
<meta name="author" content="Jeremy Likness">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>This is the Heading</h1>
<p>Can you get a sense of the structure from this?
</body>
</html>
HTML is Declarative…
Consulting/Training
<?xml version="1.0">
<note>
<to>Jeremy Likness</to>
<from>Me</from>
<body>Do not forget to show the XML example.</body>
</note>
…and so is XML
Consulting/Training
eXtensible Application Markup Language
Pronounced “Zammel” (rhymes with “Camel”)
An open specification by Microsoft
XAML *is* XML
Instantiates classes and initializes values and properties
Used in WPF, Silverlight (including Windows Phone apps), Windows Workflow Foundation, and the Windows Runtime
XML CLR (or WinRT) that is language independent
The same XAML can be used whether you are writing your imperative code in C#, VB.NET, or even C++
XAML
Consulting/Training
Calculator
Consulting/Training
XAML instantiates classes
XAML populates properties
UI Elements can be declared with XAML
UI Elements have a special feature called “data-binding”
Data-binding can be used to view data
Anything that can be declared in XAML can be written with code!
What Did We Learn?
Consulting/Training
var page = new Page();
var grid = new Grid();
page.Content = new Grid();
var textBlock = new TextBlock();
var binding = new Binding
{
Path = new PropertyPath("Result")
};
textBlock.SetBinding(TextBlock.TextProperty, binding);
grid.Children.Add(textBlock);
grid.DataContext = new object(); // calculator here
XAML Code
Consulting/Training
<TextBlock
Style="{StaticResource HeaderTextStyle}"
Text="{Binding Path=Result}"/>
Quick DecompositionCreate an instance of the TextBlock WinRT component
Set the Style property of the TextBlock
Moustaches are for markup extensions. They will instantiate the “StaticResource” class and pass the “HeaderTextStyle” parameter
This one uses a named parameter with the special Binding markup extension. Binding is what makes XAML magic for UI.
Consulting/Training
Data-Binding
Source (Data)Target
(Framework Element)
Data-BindingComponent
One-Way One-Way
Two-Way
Consulting/Training
Data-Binding
Consulting/Training
Data-Binding
Consulting/Training
Simple interface to implement on your class
Whenever you want data-binding to “know” about changes (typically whenever a property is updated) you raise an event with the property name
Empty property name means “all properties are suspect”
Also similar interface and events for collections (observable collections)
Notify Property Change
Consulting/Training
Very powerful – you don’t want to “design in the dark”
You can implement this several ways, including “design-aware classes”
Visual Studio 2013 has support for data files (such as JSON)
Specify a data source and type, or an instance and “is design-time creatable”
Design-time Data
Consulting/Training
The Visual Tree
Consulting/Training
Value Converters
Consulting/Training
Helps separate the data from the information (the raw “stuff” from the presentation)
Takes in one value, spits out another value
Works equally well on primitives and complex types
Typically one way (for presentation) however can be both ways in case you want to take user input and map it back to an internal instance
Avoid things like string-formatting, data preparation, etc. in your model, instead use the built-in XAML constructs to do this in the view
Value Converters
Consulting/Training
Provides the “dependency property system” designed to compute values of properties from multiple sources (XAML configuration, animations, styles, data-binding, etc.) and provide system notification when values have changed
Properties are registered with the system and exposes as CLR properties that pass information back and forth to the underlying object
Common base for most XAML UI elements – allows them to bind to each other, to data sources, etc.
Provides inheritance, i.e. “data context” can be set at a parent level and propagate to children
Dependency Objects and Properties
Consulting/Training
Attached Properties
Consulting/Training
Used to extend functionality or apply a common behavior to existing elements
For example, an element doesn’t “know” about grid rows and columns, but attached properties extend elements to allow them to specify what cells to appear in when a grid is rendered
If you find you are performing a common operation (such as listening to text change events to update data-bindings) consider encapsulating in a behavior
Behaviors are independently testable and then reusable and can be applied across existing elements
Use dependency properties to save/recall values
Attached Properties and Behaviors
Consulting/Training
The Visual State Manager
Consulting/Training
Again helps to separate the UI from the code logic
Declarative way to map states to their visual representation
Rich support for animations
Transitions to emphasize the shift between states
Orthogonal groups
Mutually exclusive states
The Visual State Manager
Consulting/Training
Model-View-ViewModel (MVVM)
Consulting/Training
At the basic level means you have a class that exposes properties for data-binding and holds the state of the presentation
Commands are a special type of data-bound “action”
Plenty of libraries but WinRT XAML has plenty to support it “out of the box”
Don’t be afraid of code-behind when it relates to the UI (presentation) piece – after all, it is just an extension of the classes that are declared by XAML
Reuse across platforms (phone, Windows 8, etc.)
Model-View-ViewModel
Consulting/Training
Imperative to Declare XAML Data-binding Notify Property Change Design-time Data The Visual Tree Value Converters Dependency Objects and Properties Attached Properties and Behaviors The Visual State Manager MVVM
Recap
Consulting/Training
Subscribers Enjoy
Expert Instructors
Quality Content
Practical Application
All Devices
Wintellect’s On-DemandVideo Training Solution
Individuals | Businesses | Enterprise Organizations
WintellectNOW.com
Authors Enjoy
Royalty Income
Personal Branding
Free Library Access
Cross-Sell Opportunities
Try It Free! Use Promo Code:
LIKNESS-13
Consulting/Training
Questions?
Jeremy Likness
Principal Consultant
@JeremyLikness
Source Code:http://bit.ly/16ScWyM
![[MS-XAML] - download.microsoft.comMS-XAML].pdf · [MS-XAML]: Xaml Object Mapping Specification 2006 Intellectual Property Rights Notice for Open Specifications Documentation Technical](https://img.pdfslide.net/doc/110x75/5b43c9677f8b9a80388c1fba/ms-xaml-ms-xamlpdf-ms-xaml-xaml-object-mapping-specification-2006-intellectual.jpg)
![[MS-SLXV-2010]: Silverlight XAML Vocabulary …download.microsoft.com/download/0/a/6/0a6f7755-9af5-448b-907d... · [MS-XAML] specification enables each application that uses Xaml](https://img.pdfslide.net/doc/110x75/5b43d8907f8b9af5798c4386/ms-slxv-2010-silverlight-xaml-vocabulary-ms-xaml-specification-enables.jpg)
