WPF Image Viewer Tutorial Part 1, XAML Basics

This is part of the WPF image viewer tutorial series, you can read the introduction here.

Create the project

We'll start writing code soon, but first a short overview of what visual studio does for us.

After you installed all the required software you can start Visual Studio

Select File -> New -> Project From the main menu.

In the project types tree (on the left) select "Visual C#" and on the templates list (on the right) select "Windows Application (WPF)".

Enter "ImageViewerTutorial" into the name box at the bottom and click Ok

Visual Studio should now create a skeleton WPF application for you.

Visual Studio created 2 XAML files, each with an associated C# file.

The App.xaml and App.xaml.cs files represent the application, they handle things like initialization and cleanup and store objects that are global to the application.

The Window1.xaml and Window1.xaml.cs files are the main window files, the first thing you should do in a real project is to rename them to something more sensible, but because this is a quick tutorial we'll leave them as they are for the moment.

XAML Syntax

As you can see the two main files in our application are XAML files, XAML is an XML based format that let us declare how to build our UI's object model (it also works for other objects, but that's outside the scope of this post).

XAML is really simple, this XAML block:

<TextBlock Name="myText" Text="show me" />

Is equivalent to this C# code:

TextBlock myText = new TextBlock();
myText.Text = "show me";

We can also reference properties using XML elements and not properties:

<TextBlock Name="myText">
   <TextBlock.Text>show me</TextBlock.Text>

This syntax is especially useful if we want to put an object inside a property, another way of saying the same thing is:

<TextBlock Name="myText">show me</TextBlock>

Most WPF classes have one property that can be set like the last example above, and it's usually what you expect (A TextBlock's text, a Button's content, etc.).

That's it for now, in the next post we'll write a little bit of C# code, after it we'll go back to XAML and do some really nice things with it.

Update November 15, 2007: Fixed typo, as the commenter below noticed

posted @ Tuesday, August 14, 2007 4:22 PM

Comments on this entry:

# re: WPF Image Viewer Tutorial Part 1, XAML Basics

Left by reader at 11/6/2007 3:27 PM

I think your first example showing the C# equivalent should read:

TextBlock myText = new TextBlock();
myText.Text = "show me";

# re: WPF Image Viewer Tutorial Part 1, XAML Basics

Left by George Keer at 4/13/2008 2:42 PM

Hi, When i used this code for Image Viewing, it displays nothing...!! Only blank window displays???? How is it possible?

# re: WPF Image Viewer Tutorial Part 1, XAML Basics

Left by yaniv at 7/2/2008 9:03 AM

can you add a link from this part to the next one ?

Your comment:

 (will not be displayed)

Please add 7 and 5 and type the answer here: