Understanding XAML (eXtensible Application Markup Language) is a key to creating the latest .NET
user experiences in WPF and Silverlight. We will introduce the basic concepts around XAML and take a
look at various features such as namespaces, elements, properties, events, attached properties and some
basic layout. We’ll create a simple WPF application that covers these fundamentals. Although you will
probably end up doing most of your UI design with a drag-and-drop tool such as Expression Blend,
knowing the internals gives you a leg up in making the final tweaks to ensure an excellent user
experience.
Visual Studio IntelliSense works in XAML files very well. This means that as we type, we get tag
completion, attribute completion, and even value completion (for values that are Enums). Depending on
your preferences, you may find yourself doing a majority of your XAML in the Visual Studio editor and
saving the visual design tools for complex cases.
An Initial Window
When you start a new WPF application, you get the following XAML as a starter (Window1.xaml):
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
XAML is XML
The first thing to note about XAML is that it is XML. If you need an overview of XML, you can go here:
http://www.w3schools.com/xml/default.asp. Since the XAML is an XML document, it can only have a
single root element. In this case, the root element is “
are also common).
XAML Elements are .NET Classes
Each element in a XAML document refers to a .NET class. This means that both “
“
XAML Namespaces
In order to reference a .NET class, we also need to reference the namespace. You can think of this as the
“using” statements in a .cs file. Namespaces are added to XAML by using the xmlns attribute. You can
see that by default, there are 2 namespaces included:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
The first refers to the standard WPF namespace. This is also the default namespace, so any elements that
do not have a prefix are assumed to come from this location. You’ll notice that the namespace is written
as a URI. This does not refer to a physical location, but rather the unique identifier of the namespace.
The second refers to the XAML namespace. This is identified by xmlns:x, with the “x” being an alias
you can use as a prefix for elements from that namespace. We’ll look at this a little more closely in just a
bit.
Obviously, you can also add your own namespaces to this list. We’ll do that later on
XAML Code Behind
The x:Class attribute references the code-behind for this XAML window. You’ll notice the “x:” which
means that the Class attribute comes from the XAML namespace noted above. The value of the attribute
references the “Window1” class in the “SimpleStopWatch” namespace. If you go to the
Window1.xaml.cs file, you’ll see the partial class that is defined here.
The code behind is where we can put C# (or VB) code for things such as implementation of event
handlers and other application logic. As a note, it is technically possible to create all of the XAML
elements in code (WinForms apps create all of the UI in code), but that bypasses the advantages of having
the XAML.
Other Starting Attributes
The other attributes of the Window element (Title="Window1" Height="300" Width="300") are
simply properties of the Window class (more below).
The Grid Element
The final element is the
element only allows for a single child. This means that if we want to include more than one Control in
our Window, we will want to wrap them in some sort of layout control that allows multiple children. The
Grid is just that sort of control.
Properties as Attributes
Properties of elements can be expressed in a couple of different ways. The first is by using an XML
attribute. The Title, Height, and Width properties of the Window are examples of this. We’ll go ahead
and adjust a few of the values now. In addition, we’ll add the “TopMost” property and set it to True. This
will keep the application on top of other active windows. This makes it more useful as a timer for other
processes. Here’s our Window markup:
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Simple Stop Watch" Height="150" Width="250" Topmost="True">
Properties as Nested Elements
Properties can also be expressed as nested elements. This is often required when properties are of a
complex type. Let’s define some rows for our Grid. Here’s what the markup looks like:
You can see here that we have set the “Grid.RowDefinitions” property by creating a nested element. This
particular element accepts a list of child objects (“RowDefinition”). We won’t go into all of the options
for the “Height” property of the rows; that’s best left to a discussion on layout controls. For now, just
know that “Auto” means that the row will only take up as much space as its contained elements; “*”
means to take up the remaining space. We won’t define any columns for this application, but they are
defined much the same way
Attached Properties
An attached property is a property that doesn’t belong to the element that specifies it. Let’s take a look at
an example. We’ll add a TextBlock to the Grid. This will be the output for the time of our Stop Watch:
HorizontalAlignment="Center" VerticalAlignment="Center"
Text="00:00" />
First note that our TextBlock is nested inside our Grid markup. Most of the attributes are simply
properties of the TextBlock class (FontSize, HorizontalAlignment, VerticalAlignment, Text).
attached property, we can use this in any element contained in the Grid to let the Grid know how to
handle the layout. In this case, we are indicating that the TextBlock should be placed in the first row of
the grid.
To be Continued.....
No comments:
Post a Comment