XAML in WPF and Silverlight

XML Application Markup Language (XAML), pronounced "Zamel," is an XML based language for building user interfaces. You'll find XAML being used in both Windows Presentation Foundation (WPF) and Silverlight applications. WPF is for desktop application development, and Silverlight is for Web-based development. Both WPF and Silverlight have much in common through programming with XAML. Therefore, this article provides an introduction to XAML and shows you how to perform layouts, which are common to both WPF and Silverlight. This Article can be useful before start learning the WPF and Silverlight chapters so that you can get the most out of what is specific to each technology. For simplicity, I'll demonstrate concepts by using a WPF application, but what you learn will be applicable to both WPF and Silverlight. Before reading this Article, you might want to read or review XML Article for an introduction to XML, which will provide you with familiarity of basic XML syntax.

Starting a WPF Project

As you are reading a book about VS, it's only natural that you would want to experience XAML from within the VS IDE. As stated earlier, we'll use a WPF Application project for describing XAML because it has fewer files and is simpler than a Silverlight application. To create the WPF Application project, select File | New | Project and select WPF Application in the New Project window. Name the application anything you like and click OK. What you'll see is a new project that has Window1.xaml file open in VS with contents similar to Listing B1.

Listing B-1 A new XAML file

<Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

In VS, the default layout for Window1.xaml is to have a visual designer on the top half of the work window and XAML in the lower half. You can view the full XAML document by grabbing the top edge of the XAML half and dragging it to the top of the screen so that you are only looking at the XAML editor. The first thing you should notice about Listing B-1

Elements as Classes

For XAML to be meaningful as code, elements must be associated with classes. The Window element in Listing B-1 is associated with a class named WpfApplication1 .MainWindow, specified by the x:Class attribute. The x prefix aliases the http://schemas .microsoft.com/winfx/2006/xaml namespace, where the Class attribute is defined. By mapping the element to a class, you allow VS to compile the XAML into code that runs. Notice that the default namespace is http://schemas.microsoft.com/winfx/2006/xaml/ presentation, which defines how each of the elements without prefixes will be compiled to code. The important fact to realize here is that when writing XAML, you are creating a document that will be translated into executable code for you at compile time.

Attributes as Properties

Title, Height, and Width are attributes of the Window element in Listing B-1. When VS compiles the XAML, each of the attributes of elements will be translated to properties of the class that the element is translated to. More specifically, the WpfApplication1. MainWindow class will have Title, Height, and Width properties. Each of the properties will be set with the value assigned to their corresponding attributes.

Executing the XAML Document

Remember that this is not a tutorial on WPF and that the focus needs to be on understanding how XAML works. Nevertheless, it's informative to see what happens when XAML is compiled and executed. Press F5 or click the Start Debugging button on the toolbar to run this program. What you'll see is a window similar to Figure B-1.

Figure B-1 shows how the Window element executed, creating an application window with normal title bar, minimize and close buttons, and borders. You can also see the results of applying the attributes of the Window element where MainWindow appears on the title bar and the dimensions are set by Height and Width.

This illustrates the power of XAML, where you can produce sophisticated results without writing a line of C# or VB code yourself. Of course, all of the XAML translates to code, but the declarative nature of XAML lets you say what you want without having to specify how it's done. XAML saves you from writing a lot of code to produce equivalent results. The code that actually runs is generated for you.

Figure B-1 Executing XAML

Property Elements

You've seen how attributes translate to properties. In addition to attributes, XAML has property elements, which are child elements where one or more other elements become assigned to a property. An example of a property element would be the Content property of a Button. A Button is a class in both WPF and Silverlight that a user can click to produce some action in your program. The Content property of the Button determines what the user sees. To describe the difference between a property attribute and a property element, I'll show you an example of both with the Content property of the Button class. Listing B-2 shows a Button with its Content set as an attribute.

Listing B-2 A Button with Content set as an attribute
 

<Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Button Content="Click Me" />

</Window>

Figure B-2 A Button with its Content attribute set as Text

 A powerful feature of XAML is property elements that allow you to add sophisticated markup that will be assigned to a class property. In the case of the Button, we'll enhance the Content property as a property element in XAML to show how to add content other than text. The following markup is the Button from Listing B-2, enhanced to hold an image instead of text. For readability, I added a line break for the value of the Source attribute:

<Button>

<Button.Content>

<Image Source=

"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" />

</Button.Content>

</Button>

Instead of setting the Content attribute, the preceding example uses property element syntax, where the child element is named <parentElementName.attributeName>. The benefit of property element syntax shown in the preceding code is that the Content property will now be set to an image. With attribute syntax, you were limited to text, but with property element syntax, you can put anything in a button. Of course, instead of what I did with the image, you would want to use common sense and only add content that is meaningful for the application.

Figure B-3 Button with Content property element set to Image

TIP

VS provides XAML editor support by allowing you to place your cursor between begin

and end tags, pressing ENTER, and indenting the start position of the cursor on the new

line between the start and end tags. From that point, you can type < and begin working

with Intellisense to select the element and attribute you need to implement with property

element syntax.

Markup Extensions

Another extensibility point in XAML is markup extensions, which allow you to set an attribute to reference another value. Common uses of markup extensions include data binding and resource usage. Data binding is the practice of associating data with a user interface control. For example, if you needed to show a customer record on the screen, you would bind each property of the customer object to parts of the screen, such as binding a customer name to a TextBox on the screen. Right now, it's important to concentrate on what a markup extension is, and you'll see an example that applies a resource to an element.

A resource is some type of object or value that can be used by multiple controls. For example, you can define a special color for buttons on your screen in one place and then use a markup extension to point all of these buttons to the same resource. That way, you can change the color resource in one place and all buttons referring to that color resource will change automatically. Listing B-3 defines a brush resource of a specific color and shows how to reference that brush from multiple buttons using a markup extension.

Listing B-3 Markup extension for using resources

<Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Window.Resources>

<SolidColorBrush x:Key="ButtonBrush" Color="Yellow" />

</Window.Resources>

<StackPanel>

<Button Background="{StaticResource ResourceKey=ButtonBrush}"

Content="Button One" />

<Button Background="{StaticResource ResourceKey=ButtonBrush}"

Content="Button Two" />

</StackPanel>

</Window>

The Window.Resources element in Listing B-3 is a property element of Window. It contains a SolidColorBrush with Color set to Yellow. Everything in WPF and Silverlight is drawn with brushes, which define colors, gradients, images, media, or patterns. In this case, we'll keep it simple with a single color, which is what SolidColorBrush is good for. The point here is not what a brush is, but the fact that the brush is a resource that will help demonstrate how to use a markup extension to access that resource. It's important to assign a key to every resource because that key is what resource markup extensions use to identify the resource.

You can see the markup extension assigned to the Background attributes of the Button elements in Listing B-3. Markup extensions are surrounded by curly braces. Within the curly braces are the extension type and attributes associated with the extension. In Listing B-3, the extension type is StaticResource, which allows you to refer to a resource. The ResourceKey attribute of the StaticResource extension specifies the particular resource to use. The value, ButtonBrush, matches the key of the SolidColorBrush resource. So, the value of the BackGround attribute of the Button elements is a StaticResource for a SolidColorBrush that has its color set to Yellow. This effectively means that the Buttons will have Yellow backgrounds.

To see the value of using resources, consider the situation you would be in if you set the BackGround attribute of each button directly to Yellow instead of using the

Figure B-4 Two Buttons using the same resource via a markup extension

StaticResource markup extension. Further, think about the amount of work you would need to do if you wanted to change the background color of all buttons, resulting in recoding each individual button. However, with the StaticResource markup extension, you can change the color in the SolidColorBrush resource, and the BackGround of all buttons will change without any additional work. Figure B-4 shows each of the buttons. Though you can't tell the background color in the gray scale of this book, I promise that they are yellow.