Mastering XAML
This chapter is from the book
This chapter is from the book
This chapter is from the book
You might be thinking, “Isn’t Chapter 2 a bit early to become a master of XAML?” No, because this chapter focuses on the mechanics of the XAML language, which is a bit orthogonal to the multitude of XAML elements and APIs you’ll be using when you build Windows Store apps. Learning about the XAML language is kind of like learning the features of C# before delving into .NET or the Windows Runtime. Unlike the preceding chapter, this is a fairly deep dive! However, having this background knowledge before proceeding with the rest of the book will enable you to approach the examples with confidence.
XAML is a dialect of XML that Microsoft introduced in 2006 along with the first version of Windows Presentation Foundation (WPF). XAML is a relatively simple and general-purpose declarative programming language suitable for constructing and initializing objects. XAML is just XML, but with a set of rules about its elements and attributes and their mapping to objects, their properties, and the values of those properties (among other things).
You can think of XAML as a clean, modern (albeit more verbose) reinvention of HTML and CSS. In Windows Store apps, XAML serves essentially the same purpose as HTML: It provides a declarative way to represent user interfaces. That said, XAML is actually a general-purpose language that can be used in ways that have nothing to do with UI. The preceding chapter contained a simple example of this. App.xaml does not define a user interface, but rather some characteristics of an app’s entry point class. Note that almost everything that can be expressed in XAML can be naturally represented in a procedural language like C# as well.
The motivation for XAML is pretty much the same as any declarative markup language: Make it easy for programmers to work with others (perhaps graphic designers) and enable a powerful, robust tooling experience on top of it. XAML encourages a nice separation between visuals (and visual behavior such as animations) and the rest of the code, and enables powerful styling capabilities. XAML pages can be opened in Blend as well as Visual Studio (and Visual Studio has a convenient “Open in Blend...” item on its View menu), or entire XAML-based projects can be opened in Blend. This can be helpful for designing sophisticated artwork, animations, and other graphically rich touches. The idea is that a team’s developers can work in Visual Studio while its designers work in Blend, and everyone can work on the same codebase. However, because XAML (and XML in general) is generally human readable, you can accomplish quite a bit with nothing more than a tool such as Notepad.
Elements and Attributes
The XAML specification defines rules that map object-oriented namespaces, types, properties, and events into XML namespaces, elements, and attributes. You can see this by examining the following simple XAML snippet that declares a Button control and comparing it to the equivalent C# code:
XAML:
<Buttonxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"Content="Stop"/>
C#:
Windows.UI.Xaml.Controls.Buttonb =newWindows.UI.Xaml.Controls.Button(); b.Content ="Stop";
Declaring an XML element in XAML (known as an object element) is equivalent to instantiating the corresponding object via a default constructor. Setting an attribute on the object element is equivalent to setting a property of the same name (called a property attribute) or hooking up an event handler of the same name (called an event attribute). For example, here’s an update to the Button control that not only sets its Content property but also attaches an event handler to its Click event:
XAML:
<Buttonxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"Content="Stop""Click="Button_Click/>
C#:
Windows.UI.Xaml.Controls.Buttonb =newWindows.UI.Xaml.Controls.Button();b.Click +=b.Content =new Windows.UI.Xaml.RoutedEventHandler(Button_Click);"Stop";
This requires an appropriate method called Button_Click to be defined. The “Mixing XAML with Procedural Code” section at the end of this chapter explains how to work with XAML that requires additional code. Note that XAML, like C#, is a case-sensitive language.