My XML is Alive! An Intro to XAML

Consulting/Training
My XML is Alive! (An Intro to XAML)

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

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 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.

Consulting/Training
Data-Binding
Source (Data)
Target
(Framework
Element)
Data-Binding
Component
One-Way One-Way
Two-Way

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

Consulting/Training
Questions?
jlikness@Wintellect.com
Source Code:
http://bit.ly/16ScWyM

My XML is Alive! An Intro to XAML

My XML is Alive! An Intro to XAML

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(7)

Similar to My XML is Alive! An Intro to XAML

Similar to My XML is Alive! An Intro to XAML(20)

Recently uploaded

Recently uploaded(20)

My XML is Alive! An Intro to XAML

Editor's Notes