Information for designers and interactive developers - Issue 3 - September 2008
home  |  articles  |  register for the newsletter  |  Issue 1  |  Issue 2  |  Issue 4  |  Issue 5  |  Issue 6
XAML - What, how, why? - Define nested hierarchies
With the introduction of the Windows Presentation Foundation (WPF), Microsoft also brought up the new XML dialect XAML (eXtensible Application Markup Language). The purpose of XAML is to define nested hierarchies of objects in a structured and declarative way.

Thinking of a graphical user interface, you'll find lots of those nested hierarchies: A window consists of several areas, containing labels, textboxes, buttons etc. A button then, for example, is a border with a text block inside, and the text is an arrangement of lines. XAML makes it very easy to express such hierarchies. Behind the curtains, XAML is nothing more than a set of mapping rules that define the mapping of XML namespaces, elements and attributes to .NET framework namespaces, classes, properties and events. Theoretically, everything you can do with XAML could also be written in one of the .NET programming languages. The following example illustrates how some XAML-Fragments would be expressed with C#:



Why yet another language?
Using XAML for certain parts of a software product brings some key advantages for both the developers and the designers:
  • XAML is not only human readable but can also be parsed or generated by third party tools. And this is where Expression Blend and Expression Design come into play. Behind the scenes, these designer programs all produce XAML that can directly be used by the programmers.
  • By using XAML, the user interface definition and the program logic are highly decoupled. When used in the right way, changes in either one of the two parts have no major impact on the other one. The separation of concerns with XAML also greatly increases maintainability of such projects.
What is the glue between XAML and the program's logic?
In the old days, the connection between the program logic and the UI was a matter of programming. In XAML most of these touching points can be made with data bindings: attributes of a XAML-Element can be declaratively bound to a property of a software-object. Due to the nature of XAML (elements are objects), one can even bind attributes to other attributes. The following Example consists of a slider control and a rectangle. The rectangle's height and width are bound to the slider's value property:

The interesting thing about this example is that it's a fully working XAML fragment: when displayed for example in XAMLPad, you can drag the slider's knob and the rectangle's size will change in realtime. Where developers had to write lots of code to hook up event handlers and change notifiers to their UI controls, it is now possible to do all this in one simple bit of XAML.

With the introduction of WPF a new kind of property was introduced: the dependency property. Among other features, dependency properties have the ability to provide change notifications. Whenever the value of a dependency property changes, it can automatically trigger certain actions like refreshing data bindings, re-rendering UI-elements and much more. Dependency properties are used throughout the whole WPF framework. For example, the animation system of WPF heavily depends on dependency properties that change their values over time.

Databinding is therefore a good way to provide the UI with data from the program logic. Dependency properties of the UI elements can be bound to the relevant properties and even methods of the business objects and automatically react on value changes.

Once a UI-element is bound to its data, designers can still move it around or completely change its look without breaking the functionality. And this is, what makes XAML a very strong concept!

Bindings in Expression Blend
As all the bindings are expressed declaratively as well, the can of course be defined in Expression Blend.

Let's suppose we have a class called MyData in our business layer:

Notice, that the business class implements the INotifyPropertyChanged interface. The PropertyChanged event is needed to provide the dependency properties with change notifications from the business layer and should be called each time a property value changes.

While the above class is still written in Visual Studio 2008, we now switch over to Expression Blend. There we want to create a window with a textbox in it, which should be bound to our TextData property. To do this, the following steps must be made:

First, create an empty window. Then the window's DataContext must be set to the MyData class. This can be done in the window's "Common Properties" by clicking the "New" button next to the label "DataContext":

In the following dialog, the MyData class should appear. Select it and press OK.

Now it's time to add a control to our window. Insert a new TextBox to the window and open its properties:

Next to the "Text" property, there is a little white box. Click on that box and select "Data Binding." from the Menu:

You should now see the following dialog:

Choose "TextData" as the property to bind to and set up a TwoWay binding. Then press Finish. The text in the TextBox should now change to "Hello XAML!" as it is now bound to our class.

By doing these simple steps we have just bound our UI to the business layer. And because in the last step we set up a "TwoWayBinding" changes we make in the TextBox are passed back to the business layer. You can test this by running the example in Visual Studio: set a breakpoint on the set method of the TextData property and hit F5. Now start typing something into the textbox and right after the first character the breakpoint should be hit. This happens, because we told the binding to update the source on every change of the textbox's content. This setting could of course also be changed, so that the update only occurs when the textbox loses its focus.

This was just one simple way of setting up a databinding in WPF. There exist several other variations how data can be bound to UI properties each with their own advantages. For example: by using the ObjectDataProvider instead of the DataContext, you can pass arguments to the constructor of the data layer class and bind the UI properties to methods.

As you can see, the declarative nature of XAML leverages the co-operation of Visual Studio and Expression Blend and offers a convenient way of connecting UI and software objects.

What else can one do with XAML?
Basically everything! Another exciting Part of XAML is its extensibility. Instead of only using the WPF XAML elements, you can define your own namespaces with your own classes.

The following XAML fragment creates an instance of MyClass and assigns its attribute MyAttribute the value "Hello world!":

Writing the class is straightforward:

Of course it is also possible do nest elements, define dependency properties and basically everything else that is possible with XAML in WPF. And that is by far not the end of the story: as XAML (even with your own namespaces and elements) is still just XML, you could start writing your own tools to generate it according to your needs.

Actually Microsoft already uses XAML for other things than just defining user interfaces: The workflows of the Windows Workflow Foundation are declared by using XAML.

This looks as following in the workflow designer of Visual Studio:

As you can see, XAML is not only for designing user interfaces but also a new way to write or generate code using your own classes in a declarative way.
50 screencasts on Silverlight
If you need some material to start learning Silverlight 2, check out this set of 50 short screencasts delivered by Mike Taulty and Mike Ormond, two evangelists from the UK.
Download a free trial of Expression Studio 2
Download a trial of the new Expression Studio. New features in Blend 2: Silverlight support, vertex animations and an improved user interface with a new split design/XAML view. Expression Web 2: now with PHP support, Photoshop import functionality, improved web standards compliancy, and ASP.NET Ajax server control support and more.
Laguna Coupé with Silverlight and Deep Zoom
Enjoy a Silverlight & DeepZoom experience with the Laguna Coupé microsite, from Renault.

Popfly Game Creator
Maybe you already know Popfly, the platform for building gadgets, mashups and web pages all in a visual way without any coding. Now there is a new feature launched: check out Popfly Game Creator, and build your own game without writing any line of code. Have fun!