XAML is an acronym for Extensible Application Markup Language. Being a markup language, XAML isn't any different from your everyday-used XML or HTML. XAML is, at its core, an XML file that is used by Silverlight (and WPF) to create the user interface layer of your application. You can use just about any application to create XAML such as Visual Studio, Expression Blend, or even just plain old-school Notepad.
Not every XAML file is used by Silverlight for rendering the user interface layer. In every Silverlight project you will create, you'll notice a file named App.xaml. This file doesn't have any controls added to it, nor does it have the ability to host any controls. Instead, this file is used to host the application-level style resources (such as a Resource Dictionary, which we will talk about in a later chapter) and all of the application lifecycle events' receivers (such as the startup or exit events).
XAML gives us the ability to separate the user interface (UI) layer from the code layer. A XAML element will always represent a .NET element, so every attribute we set on the UI layer using XAML actually corresponds to a property within that .NET element it represents. This direct representation is also the reason why everything you can do with XAML on the UI layer, you can do in code (using C# or VB) as well.
To see how XAML makes our life easier when working with user interface components, let's examine the following line of code:
<input type="button" style='width:100px;height:40px;' value="Submit"/>
The preceding line of code should look familiar to you as it's the basic HTML syntax for adding a button to the screen.
Now, let's add the same button using the ASP.NET syntax:
Button btn = new Button(); btn.Width = Unit.Pixel(100); btn.Height = Unit.Pixel(40); btn.Text = "Submit";
Finally, let's add this button using XAML:
<Button Width="100" Height="40" Content="Submit"/>
As you can see, using XAML cuts down our code from four lines in ASP.NET to one short line of code.
Button, among other controls, also known as content controls, allow us to add a child control to display the control's content. If we take our button as an example, we can add an image as its content instead of the usual text:
<Button Width="100" Height="40"> <Button.Content> <Image Source="fun.jpg"/> </Button.Content> </Button>
Content controls are used very often in Silverlight and we will dig more into them later on, but the one key concept to remember about content controls is that they can only hold one child control as content. This limitation may look strange to you right now, but as we discuss layout controls, such as the Grid control in Chapter 2, Laying out Our User Interface, you will see that this limitation is hardly a limitation at all.
The easiest way to work with XAML controls is to drag them out of the toolbox and into the design surface. We can do this using both Visual Studio 2010 or a more designer-oriented application, for example Microsoft Expression Blend 4.
The following screenshot shows what the controls toolbox looks like in Visual Studio:
 |
The following screenshot shows what the Controls toolbox looks like in Microsoft Expression Blend 4:
 |
Just like many other programming languages, XAML uses namespaces to organize related controls into groups. Each namespace represents a group of controls and in order to use any of those controls, the namespace must be added to the XAML file (either at the root element level which affects the entire page, or at a lower-level container control which affects only the children of that control).
As we will probably need more than one group of controls within our application, XAML supports multiple namespaces within a single application. To differentiate the different namespaces, each is assigned a prefix value. That prefix value will later be used when we want to add a control from that specific group.
Of course, a declaration of a namespace without reference to the assembly file that actually has the control is useless, so make sure you reference the correct assembly file before adding the namespace.
Let's examine the basic MainPage.xaml file, which gets created whenever you create a new Silverlight project:
<UserControl x:Class="SilverlightApplication2.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> ... </UserControl>
From the preceding code snippet, we can see that http://schemas.microsoft.com/winfx/2006/xaml/presentation is the default namespace that the page will use (we can tell it's the default namespace as it has no prefix). This namespace hosts a bunch of the core controls you can add to your Silverlight application.
Another namespace that gets declared by default is http://schemas.microsoft.com/winfx/2006/xaml. Unlike the default namespace, this namespace gets declared with a prefix (x). That means that whenever we wish to use a control or a property from this namespace, we will have to first mention its prefix value, followed by the name of the property. This namespace provides functionality that is common across our application. We can also add our own namespaces to our application. We will discuss all about namespaces in Chapter 2,Laying out Our User Interface.
If we look back at the button we defined previously in this chapter, we will notice that it has no name/ID attribute, which means that we won't be able to access this object in our code behind by name, but we will have to use more complicated methods such as the FindChildByType or FindName methods of the visual tree object to access it. To give an object a name in Silverlight, we can use either the x:Name attribute (can you guess where the x prefix came from?) or just the plain Name attribute. The following line of code shows the XAML code for our button with the newly added property:
<Button Width="100" Height="40" Content="Submit" x:Name="btnSubmit"/>
If you play around a bit with adding controls in Visual Studio, you will notice that many of the controls you add from the toolbox will automatically add a reference to the right assembly and declare the correct namespace for you. We will discuss in detail how to reference namespaces in the next chapter of this book.
XAML allows us to set properties of our objects in two ways—Using the Inline property and using the Element property. We have already seen the Inline properties when we declared our Button control—Width, Height, Content, and x:Name are all Inline properties. When we wish to set a simple property of our element, we will usually use the Inline properties as they are fast and easy to set, but if we want to set an image as the content of our button, we would need a way to represent a more complex value for the property. To set an image as the content of a button, we will set an Element property. An Element property of the content will look like this:
<Button Width="100" Height="40" x:Name="btnSubmit"> <Button.Content> <Image Source="fun.png"/> </Button.Content> </Button>
Notice the syntax for the content Element property in the following line of code:
<ControlType.PropertyName>some-value</ControlType.PropertyName>
You don't have to remember this syntax by heart, as Visual Studio's IntelliSense will help you write it.
With this we conclude our overview of XAML, but obviously there is a lot more in the language than what we've covered. As XAML is a key concept in Silverlight, we will deal with it a lot more in the coming chapters, so even if you didn't understand everything we talked about so far, you definitely will, once we get to use it more.