A Beginners Article about XAML and the WPF Engine

Preface

This article overviews WPF's graphics capabilities, including two-dimensional and three-dimensional shapes, fonts and animations. The writer would like to stress that the level of this article is for beginners. The reason why I am writing this article is because WPF integrates drawing and animation features that were previously available only in special libraries (such as Microsoft GDI+ and DirectX). The graphics system in WPF is designed to your computer graphics hardware to reduce the load on the CPU and in many cases speed up graphics rendering. So taking WPF for what it is, it is actually a remarkable technology that, apparently, can read and assess what your machine's graphics capabilities are via the machine's video interface card. Moreover, WPF graphics uses a resolution-independent measurement in units to make applications more uniform and portable across devices. For instance, the size properties of elements in WPF are measured in resolution-independent pixels, where one pixel represents 1/96 of an inch--but this depends on the computer's DPI (dots per inch) setting. The graphics engine determines the correct pixel count so that all users see elements of the same size on all devices. To emphasize the importance of graphics sketching, I also introduce the Microsoft Blend SDK version 4.

Graphic elements are rendered on screen using a vector-based system in which calculations determine how to size and scale each element in order to prevent an oversized element against a regular-size foreground. The basic 2-D shapes are Lines, Rectangles, and Ellipses. WPF, as we all know, has controls that can be used to create custom shapes or curves. Brushes can be used to fill an element with solid colors, complex patterns, images, and even videos.

Tell Me What XAML Is

In Windows Presentation Foundation, the screens are built with a dialect of XML called Extensible Markup Language (XAML). XML is data centric and is viewed as a technology in its own right. Data on certain web pages or a web service request (response message) is in the form of an XML document. Any data (any alphanumeric character) is tagged, as the rules for XML are very strict. That is, controls, images, or any item that are marked up on a page via HTML comprises the presentation content. Alphabetic letters or numbers are separately tagged via XML. The idea is to separate the presentation content on a web page from the data. This outputs a more dazzling-looking page. XAML is more declarative than imperative. By declarative, I mean that a control is specified as an XML element with attributes and sub-elements to describe what the control will look like. You do not have to be concerned with how this done because when you tell WPF what you want, it will figure out how to build the controls (instantiating objects and assigning properties) under the hood. This parallels dragging and dropping a control onto a Windows Form. The partial classes enable code to be generated, where the developer is only responsible for writing the event handler code. In addition, the designer is split between a graphical design surface on top and XAML on the bottom. The designer works the same as Windows Forms in that you can drag and drop controls onto it and edit them in the Properties window. But XAML is new, and we therefore must take a close look at XAML and define some terms that are used in WPF.

In Windows Forms, everything translates directly into code. However, WPF translates its user interface to XAML, which gets compiled into code later. This is a key distinction: XAML compiles into a binary form called BAML. At this point, however, it is not necessary to go into a description of BAML Just note that when working in the UI designer for a WPF project, VS2008 produces XAML, instead of code for all UI elements.

<Window x:Class="MainWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>

The XAML defines a window with a title, dimensions, and an empty grid. A later section on layout explains the grid. Because it's XML, you also have namespaces: xmlns and xmlns:x. Windows are often associated with a code-behind file, which is C#. But where does the C# code come into play? WPF uses events, just like Windows Forms, so you need a place for the handlers to go, which is the code-behind.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
}

Notice that the Window1 class in the code-behind is partial and that its constructor calls InitializeComponent. In Windows Forms, the InititalizeComponent was in a separate file that you could get to. However, WPF generates InitializeComponent from the XAML. You see, WPF will ensure that the XAML creates a partial class named Window1 with an InitializeComponent method, and then C# will combine and compile the partials. If you get an error message that underlines the InitializeMethod, then drag your mouse over that underline noting the error. A box should appear that when clicked, gives you the option to generate a "stub method" to correct the error.

Controls in XAML

Many people will use the drag-and-drop capabilities of the WPF designer to build their UIs, but others will want to work directly in XAML. To try out the designer, drag and drop a Label control onto the window in the designer. If you have the split window open, you'll see the XAML for the Label come into view. You can see the Label control in the XAML code and how the text inside of the Label tag has been changed. There are also attributes on the Label that match properties that you'll see in the Properties window. The Name attribute is the variable name you use in code to access this label if you need to, and VerticalAlignment describes how this control will align within its parent element, which means that this Label will align inside the top border of the grid. The Margin in a later comes later when talking about layout (it means that the top, left, right, and bottom borders are the specified distance from the containing control, which is the Grid). Notice that the Content property matches the Label text, but the XAML doesn't show a Content property. The XAML we used was a shortcut for the following:

<Label Height="28" Margin="80,94,78,0"
Name="label1" VerticalAlignment="Top">
<Label.Content>
What the Heck is XAML?
</Label.Content>
</Label>

OUTPUT:

If you want to use text only, which is the most typical content, you don't need to wrap the text in the property-specific content element. However, one of the cool things about XAML controls is their composability. Whether it is a label, button, text box, or any other type of control, you can add any type of content to them that you want. You can put only one item inside of the Content element, but that one element can be a layout control that can hold many controls.

Managing Layout

One of the subjects in the previous section was how WPF determined where the Label control should appear on the page, its size, and its relationship to other controls. While Windows Forms applications have absolute positioning and layout support via anchoring and docking, WPF is more sophisticated and has more options. For WPF, you need to know about control alignment and sizing, borders and margins, and layout controls for defining the relationship of containing controls and where they appear. With WPF controls, you can control their alignment and size. You can also manage their content, borders, and margins, which are often referred to as the box model. The default behavior of a WPF control is to stretch to fill its contents. If you are using a ListBox or Grid, filling the entire area might be the desired appearance, but you might not want this to happen with Button or Label controls. The following Label control demonstrates stretching behavior:

<Label Name="label1" Background="AliceBlue">What the Heck is XAML?</Label>

This Label doesn't have any attributes that specify its size or position, so the default is to stretch. In any event, a common way to lay out controls is for them to be in-line horizontally or vertically. You can use the StackPanel layout control to accomplish this. Here's an example:

<StackPanel Orientation="Horizontal">
<Label>One</Label>
<Label>After</Label>
<Label>the Other</Label>
</StackPanel>

You can add numerous items to the StackPanel, as you saw previously with the Label controls, and it will line them up. the XAML code below shows what this looks like. The example sets the Orientation property to Horizontal, but Orientation will default to Vertical if you omit it. The UniformGrid control divides the size of each cell evenly for all of its controls. The following example shows how this works:

<UniformGrid Height="100"
Name="uniformGrid1"
Width="200">
<Label>O</Label>
<Label>X</Label>
<Label>O</Label>
<Label>X</Label>
<Label>O</Label>
<Label>X</Label>
<Label>O</Label>
<Label>X</Label>
<Label>O</Label>
</UniformGrid>

Because there are nine items, the grid will look like a tic-tac-toe board. If you need more explicit control of grid layout, you should use the Grid layout control. So another layout arrangement you'll need is to place items in tabular format with rows and columns, which is the role of the Grid layout. That Grid was empty, but you'll often want to create rows and columns. The code below shows you how to use a Grid.