0
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...
Consulting/Training
 Imperative to Declare
 XAML
 Data-binding
 Notify Property Change
 Design-time Data
 The Visual...
Consulting/Training
 Imperative programming is the traditional
approach to writing code. You just … write it.
 Declarati...
Consulting/Training
// imperative (long)
var productNames = new List<string>();
foreach(var p in Products)
{
if (p.Price <...
Consulting/Training
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBind...
Consulting/Training
BasicHttpBinding myBinding = new BasicHttpBinding();
EndpointAddress myEndpoint = new EndpointAddress(...
Consulting/Training
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>I Hereby Declare</title>
<meta n...
Consulting/Training
<?xml version="1.0">
<note>
<to>Jeremy Likness</to>
<from>Me</from>
<body>Do not forget to show the XM...
Consulting/Training
 eXtensible Application Markup Language
 Pronounced “Zammel” (rhymes with “Camel”)
 An open specifi...
Consulting/Training
Calculator
Consulting/Training
 XAML instantiates classes
 XAML populates properties
 UI Elements can be declared with XAML
 UI E...
Consulting/Training
var page = new Page();
var grid = new Grid();
page.Content = new Grid();
var textBlock = new TextBlock...
Consulting/Training
<TextBlock
Style="{StaticResource HeaderTextStyle}"
Text="{Binding Path=Result}"/>
Quick Decomposition...
Consulting/Training
Data-Binding
Source (Data)
Target
(Framework
Element)
Data-Binding
Component
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...
Consulting/Training
 Very powerful – you don’t want to “design in
the dark”
 You can implement this several ways, includ...
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 ...
Consulting/Training
 Provides the “dependency property system”
designed to compute values of properties from
multiple sou...
Consulting/Training
Attached Properties
Consulting/Training
 Used to extend functionality or apply a common
behavior to existing elements
 For example, an eleme...
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
r...
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
sta...
Consulting/Training
 Imperative to Declare
 XAML
 Data-binding
 Notify Property Change
 Design-time Data
 The Visual...
Consulting/Training
Subscribers Enjoy
 Expert Instructors
 Quality Content
 Practical Application
 All Devices
Wintell...
Consulting/Training
Questions?
jlikness@Wintellect.com
Source Code:
http://bit.ly/16ScWyM
Upcoming SlideShare
Loading in...5
×

My XML is Alive! An Intro to XAML

1,404

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,404
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Author Opportunity Passive incomeClear marketing commitments to help grow your personal brand and your coursesInternational presence &amp; 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
  • Transcript of "My XML is Alive! An Intro to XAML"

    1. 1. Consulting/Training My XML is Alive! (An Intro to XAML)
    2. 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. 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. 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. 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
    6. 6. 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
    7. 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. 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…
    9. 9. 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
    10. 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
    11. 11. Consulting/Training Calculator
    12. 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. 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. 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.
    15. 15. Consulting/Training Data-Binding Source (Data) Target (Framework Element) Data-Binding Component One-Way One-Way Two-Way
    16. 16. Consulting/Training Data-Binding
    17. 17. Consulting/Training Data-Binding
    18. 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. 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
    20. 20. Consulting/Training The Visual Tree
    21. 21. Consulting/Training Value Converters
    22. 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. 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
    24. 24. Consulting/Training Attached Properties
    25. 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
    26. 26. Consulting/Training The Visual State Manager
    27. 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
    28. 28. Consulting/Training Model-View-ViewModel (MVVM)
    29. 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. 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. 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
    32. 32. Consulting/Training Questions? jlikness@Wintellect.com Source Code: http://bit.ly/16ScWyM
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×