Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

My XML is Alive! An Intro to XAML


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
  • Be the first to comment

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 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? Source Code: