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.
2. Consulting/Training
consulting
Wintellect 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
training
Wintellect'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
3. 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
4. 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
5. 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
7. 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 …
8. 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…
10. 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
12. 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?
13. 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
14. Consulting/Training
<TextBlock
Style="{StaticResource HeaderTextStyle}"
Text="{Binding Path=Result}"/>
Quick Decomposition
Create 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.
18. 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
19. 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
22. 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
23. 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
25. 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
27. 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
29. 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
30. 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
31. Consulting/Training
Subscribers Enjoy
Expert Instructors
Quality Content
Practical Application
All Devices
Wintellect’s On-Demand
Video 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
Author Opportunity Passive incomeClear marketing commitments to help grow your personal brand and your coursesInternational presence & exposureCross sell opportunities – instructor led classes, consulting opportunities, and conference speaking opportunitiesOpportunity to be the subject matter expert and to carve out a niche for yourself in this new businessAssociation with Wintellect