An Introductory Look at Windows Presentation Foundation: Part 1 - ' Introducing XAML '
( Page 3 of 4 )

Getting the Beta Tools

If you are running Windows XP or Windows Server 2003 with all the latest service packs, you can try WPF now. This requires several downloads, and Microsoft is quick to warn that this is beta code with all that implies about the potential for problems. I recommend trying this only on a dedicated system that is not used for any critical tasks. You should definitely read the information that is provided on the download pages.

First, download and install the WinFX Runtime Components. These are required to run any WinFX application. Next, download and install the SDK which contains samples, tools, and documentation related to WinFX development. These two downloads are all you need to run WinFX apps and to experiment with XAML.

If you have Visual Studio 2005 and want to use it to create WinFX apps, you also need to download and install the development tools for VS 2005 which provide project templates, Intellisense support, and documentation for WinFX development in Visual Studio.

After you complete the installation process, you will find a new entry "Microsoft Windows SDK" on your Start menu that provides access to the SDK tools and the ReadMe file. I recommend you actually read this file; it may save you headaches down the road. You'll also have several WinFX project templates in Visual Studio's New Project dialog box.

Introducing XAML

I already mentioned that WPF provides for declarative, or markup based, design of UIs. For this purpose, Microsoft developed Extensible Application Markup Language, or XAML. This is not the only way to develop WPF interfaces, but it is preferred because it lets you separate the UI definition from the program logic. XAML is itself based on XML and permits the creation of truly sophisticated UIs that include controls, text, shapes, images, and so on.

Let's look at a simple example that shows how XAML is used to declare a button in the UI:.

<Canvas>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button>Click Here</Button>
</Canvas>

The UI is represented as a <Canvas> element with its associated namespaces. <Canvas> is not the only root element that can be used for XAML files, but it will serve for this example (I'll discuss the various possibilities later). The heart of the definition is a simple <Button> element that encloses the display text. So far so good, but I can hear you asking several important questions:

1. How do you define an action to be taken if the button is clicked?
2. How do you specify the visual appearance of the button?
3. How do you specify the size and location of the element?

As for an action, it is handled in the usual way, by writing an event procedure that is called when the button is clicked. The procedure is placed in a code-behind file and linked to the button, as shown here:

<Canvas>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyNamespace.MyCanvasCode">
<Button Click="Button_Click">Click Here</Button>
</Canvas>

You can see that the x:Class attribute of the <Canvas> element identifies the class that contains the code behind, and the Click attribute of the <Button> element identifies the specific procedure to be called. If you want code to be able to modify the control, you must specify the Name attribute to provide a unique identifier for the control:

<Button Name="Button1" Click="Button_Click">Click Here</Button>

The code would change the control by setting the appropriate property, for example the text on the button:

Button1.Content = "I've been clicked"

A control's appearance is determined by properties, as you might expect. These properties are set as attributes in the XAML tag. This example sets the foreground and background colors of the button:

<Button Background="Green" 
  Foreground="Red">Click Here</Button>

The final question, that of location and size, is not answered as easily. Sometimes an element, such as a button, is contained within a parent element such as a grid, and its position and size is determined by its container. Other times, an element's position and size are determined by properties that you set in XAML code. Either way, you have complete flexibility to position elements just where you want them.

Figure 2. XamlPad provides a test bed for XAML code.

The WinFX SDK installation includes a nifty little application called XamlPad, shown in Figure 2. It's a simple little XAML editor that provides a pane for entering XAML and a rendering pane that shows you the result. Errors, if any, are displayed at the bottom of the window. For Visual Studio users, it will seem very basic — no Intellisense, no highlighting of errors, and so on — but it is very useful for experimenting with XAML and perhaps even testing XAML code to be pasted into a real app at some point.

Looking at the figure, you can see that the rendering includes a textbox, a label, a button, and an image. Here's the XAML code that produced this:

<Canvas >
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Gray">
<Label Canvas.Top="10" Canvas.Left="125" 
BorderBrush="Crimson" BorderThickness="4">This is a label
</Label>
<TextBox Canvas.Top="10" Canvas.Left="10" >This is a textbox
</TextBox>
<Button Canvas.Top="10" Canvas.Left="220" Height="25">Guess what this is!
</Button>
<Image Width="320" Canvas.Top="55" Canvas.Left="10" >
<Image.Source>
<BitmapImage UriSource="C:\dsc01836.jpg" />
</Image.Source>
</Image>
</Canvas>

Looks a lot like HTML, doesn't it? That's no accident. By the way, in this code you can see an example of positioning controls relative to their container — in this case, a Canvas object.

>>> More Using Microsoft Visual Studio Articles          >>> More By Peter Aitken