Windows Phone 8: An Introduction to XAML

Developing software is usually a two step process that involves developing the user interface and the business logic of the application. Windows Phone is no exception to this paradigm. When developing for Windows Phone, XAML is used for the implementation of the user interface of Windows Phone applications.

1. What is XAML?

XAML or Extensible Application Markup Language is a declarative language developed by Microsoft and used in Windows Phone to create graphical user interface objects. If you're familiar with XML, then a code snippet of XAML will look very familiar. XAML is to a C# developer what HTML is to a web developer. It is the basis of user interface design for Windows Phone.

The Windows Phone platform has a lot of building blocks at its disposal, such as Buttons, Text Blocks, Text Boxes, etc. Even though it's possible to develop a Windows Phone 8 application using only C#, it is impractical and cumbersome.

XAML makes creating user interfaces much easier. After creating a new Windows Phone 8 project or page in Visual Studio, you are presented with two views. One view displays the XAML code while the other view shows the developer its visual design representation.

To better understand this, let's revisit the project we created in the previous tutorial in which we created our first Windows Phone 8 application.

<Grid x:Name="LayoutRoot" Background="Transparent"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"><TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/><TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/></StackPanel><!--ContentPanel - place additional content here--><Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid></Grid>

You immediately notice the same hierarchical structure you find in XML and HTML. Each element in the XAML code represents a Windows Phone control, which we will be discussing later on in this series. You'll notice that each element has an opening and closing tag, just like in XML or HTML. You can also see that some elements have additional attributes, taking the following structure:

<ElementName Property1="Value" Property2="Value" ...><ChildElementName Property="Value"></ChildElementName></ElementName>

I will refer to each element in the XAML file as a control as they represent Windows Phone controls, which are objects that are a part of the framework. Each of these controls can have properties attached to them. Some of these controls, such as the Grid and StackPanel controls, can even contain other controls within them. For example, look how the StackPanel control with the Name property of TitlePanel contains two TextBlock controls.

This hierarchical arrangement of elements enables developers to design the user interface of Windows Phone applications with much more ease and also provides structure between controls that make up the user interface of a Windows Phone application.

2. XAML versus Code

As I said earlier in this article, it is possible to create the entire user interface of a Windows Phone application in C#, without using XAML. In reality, however, this is not very practical. This isn't recommended, because it makes designing the application's user interface untidy and a bit all over the place.

In addition, strictly using C# to create the application's user interface will significantly limit the possibility of using the MVVM design pattern that is baked into Windows Phone development. This means advanced techniques, such as data binding, will be more difficult to implement.

Let's take a close look at the two techniques, XAML and C#, to building an application's user interface. For this comparison, I'll first show how a TextBlock and a Button control are declared within a StackPanel control using XAML. I will then show you the equivalent in C#.

XAML

<StackPanel><TextBlock Margin="20">A Simple TextBlock</TextBlock><Button Margin="10" HorizontalAlignment="Right" Content="Simple Button"></Button></StackPanel>

You can see how declarative the above XAML snippet is. It's easy to understand the hierarchy of the controls. There's another benefit when using XAML. We can directly see the result of our changes in Visual Studio through the design preview pane, which is usually positioned on the left in Visual Studio.

C#

Let's see how we can implement the same user interface using C# instead of XAML.

//Create Our StackPanel
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;

//Create Our TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "A Simple TextBlock";
stackPanel.Children.Add(textBlock);

//Create Our Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "Simple Button";
stackPanel.Children.Add(button);

As you can see, it's a bit clunkier in comparison to XAML and we're unable to see the result of our changes on the fly. You may also have noticed that the code block in C# is almost double the lines of code and it isn't as readable as the XAML snippet we saw earlier.

For Windows Phone development, XAML is the recommended way to create user interfaces. However, there may be times that we need to implement more complicated controls that are difficult to create using XAML, for example, when the control needs to be dynamic to some extent. Even though these situations are less common, it's good to know that we can fall back on C#.

Conclusion

XAML is an integral part of Windows Phone development and a firm understanding is therefore essential. I encourage you to take a look at the official XAML documentation from Microsoft on the Windows Phone Dev Center. It contains in-depth information about the use of XAML for Windows Phone development.

In this tutorial, we've taken a look at the role of XAML in Windows Phone development and how it compares to C# to create user interfaces. In the next tutorial, we'll continue to work with XAML and come to grips with some of the more common Windows Phone controls, their use, and how to implement them in a Windows Phone 8 application.