Published: 10 May 2007
By: Andreas Kraus

You are coding in .NET and have basic knowledge of XML. You heard about that Windows Presentation Foundation (a.k.a WPF) and everyone says it’s so cool. Now you want to know more, so let’s get started!

Introduction

XAML is a language for .NET 3.0 which is responsible for forms and its elements. It is a so called markup language like HTML. Unfortunately there is no GUI tool that helps you code with XAML at the moment and that probably will not change until Microsoft releases the first Service Pack for Visual Studio 2007. So you got plenty of time to learn the basics of XAML without any shiny Wizards and GUIs. Ready? Alright.

Let’s get started with a simple button:

If you add a button like that it will fill out the whole form. Obviously because it’s missing a Height and Width attribute, so let’s add those real quick:

Figure 1: A simple XAML button

Now you actually see the button with a size of 100x100 pixels.

To make it more pleasant we want to have a look at the background of the button. How did that button choose its background and how to change it? In Vista that button will have a silver background and in XP a grey one. That is the case because WPF treats its objects contextual and an object always belongs to a top-down hierarchy. The hierarchy starts at the top with the operating system, goes along the forms with its buttons and other objects and ends at the properties of a single object – in our case the Button.

At first, the button is checking its properties to see if anything design related has been set. If that is not the case, it goes up the hierarchy until it reaches a valid property for itself. Since we didn’t set a background, it gets the value from the operation system.

So let’s go and change that background:

That only works in XAML, though. If you want to set the color in the codebehind file itself you have to set it like this:

Note: There are four types of brushes in .NET 3.0:

  • SolidColorBrush: For a plain background
  • GradientBrush: For a colored gradient
  • ImageBrush: For using images as background
  • VisualBrush: For a stamp

So where to put that button property now? In the codebehind file or in the XAML Code? Neither here nor there! Your designer is taking care of that from now on. However, if that button has to be dynamic you have to take care of it yourself.

For our pleasure WPF introduces the so called Styles. The core element is a Setter:

You can define multiple pairs of those Setters to take care of your form appearance. The style definition can be in the resources, the form itself or somewhere in the application. It is recommended to put your styles into a Resource Dictionary, this is something like a Stylesheet, you probably know about that from XHTML/CSS. It only contains design definitions (markup) and no code at all. Now you just have to exchange the Resource Dictionary between you and your designer, nothing else. Let’s have a look at a simple Style-Definition:

That’s about it and takes care of all defined buttons. Back to the button itself, in case you want to add text to the button it works like that:

If you would like to have a picture as background you have to use the following syntax:

It is getting problematic if you want to add for example a text AND an image. A button can only hold one element, in this case a text or an image. To overcome this limitation you need to use a Panel.

Panels

There are two types of Panels: Single-Layered and Multi-Layered Panels. Single-Layer-Panels add each element side by side, e.g. StackPanel and DockPanel. A Multi-Layer-Panel, such as the Grid and Canvas, can add multiple elements above each other. However, you have to define the position yourself.

The Canvas element acts like a white screen where everything is possible. You can put elements in a Canvas which are actually bigger as the Canvas itself and they will still be displayed in their full size. The Canvas doesn't crop any child elements

Furthermore you can align objects in a Canvas by using the Canvas.Left, Top-, Bottom- or Right- Property. Here is an example:

That button would not be visible, though, because we didn’t set a size for it and the Canvas doesn’t take care of that itself. It would be easier by using a Grid Object:

Now that we use a Grid the button and the Grid fill out all the available space.

Figure 2: A Dockpanel allows you to dock elements at the top or bottom

Finally, a StackPanel is what fits perfectly for our button. It exists since .NET 2.0 already and enables you to add objects in a vertical or horizontal order:

To prevent the image sticking to the border we add a little margin here:

The label has got a 2 pixel margin now and it looks much better than before.

Figure 3: Just t make it clear, a vertical ordered StackPanel would look like this:

Templates

Now hold on, didn’t I say we want to split the work between a designer and a coder? We just defined some styles and that’s not what a coder usually does. So let’s put this stuff into a stylefile. However, this time we set the property to Template instead of Content.

A template replaces the button by other controls but maintains the functional behavior. We add a style to our form now:

A Template is the property of a Control and properties are defined by styles so we should put a reference to the style on the button and define the template in the style itself.

Within the style you can set the Foreground to white. That property is being inherited by the ContentPresenter – it displays the text in white. You should use the ContentPresenter whenever you are not sure about the type of the displayed object. You could also define an image in the button; the template wouldn’t really care and show the image right away. You can also see that the height of <Rectangle> is not directly specified, it’s bound to the height of the button. (See: Height="{TemplateBinding Height}")

XAML needs to know which properties it may get from the button, so you have to declare a type for the template: <ControlTemplate TargetType="{x:Type Button}">

TemplateBinding is something like a Placeholder and you can define its value directly within the Button by setting e.g. Height="50". Every now and then you need to forward more properties to your template like the path to an image or the text for a label. Then the tag property is not enough.

However, you could do a little trick: Write your own button which is inherits from a standard button and which adds the additional properties. Define those as DependencyProperties so XAML can bind them.

Summary

Microsoft has a Vision: To separate Designers and Coders completely. In practice that is not the case yet. The Designer needs to have a basic understanding of the possibilities in WPF. Designers need to be an "Interactive Designer" these days to be able to do WPF Jobs, that’s how Microsoft calls them. I recommend to predefine Controls and Templates as a Coder, that is the most effective way when working together with a designer. XAML has big potential and applications using it can become pretty complex in no matter of time.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Andreas Kraus

Sorry, no bio is available

View complete profile here.

Other articles in this category


Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Introducing SharePoint 2010 Training at U2U read more
The Underground at PDC read more
New article: How to detect and avoid memory and resources leaks in .NET applications read more
10 resources to learn Moq read more
Silverlight MVP read more
My History of Visual Studio (Part 6) read more
BeginDialOut with Office Communicator Clients read more
DotNetNuke Fusion Results for Q3 read more
Congratulations to Q3 NEW Silverlight MVPs read more
GiveCamps Get a new Sponsor read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Great! Remo Dalton 5/11/2007 2:02 AM
Good intro Chandler Smith 5/11/2007 6:16 PM
placeholder Great! Tomy Orlando 5/15/2007 1:28 PM
Sample Andreas Kraus 5/15/2007 1:39 PM
placeholder Good news Tomy Orlando 5/15/2007 6:16 PM

Please login to rate or to leave a comment.