Click here to Skip to main content
15,868,115 members
Articles / Desktop Programming / XAML
Article

Introduction to WPF

Rate me:
Please Sign up or sign in to vote.
4.22/5 (21 votes)
12 Sep 2008CPOL5 min read 77.9K   1K   44   18
This tutorial shows you some of the basics of a WPF program, and shows you how to create a WPF Hello World application.

Downloads


What This Tutorial Teaches 

This tutorial teaches some the basics of WPF, and gives a springboard to other WPF concepts.

The End Result

At the end of this tutorial, you will have a simple WPF Hello World application.

The Tutorial 

A Little Bit About WPF 

WPF (Windows Presentation Foundation) was designed by Microsoft as a replacement for the aging WinForms API. WPF, along with three other components, WCF (Windows Communication Foundation), WF (Windows Workflow Foundation), and CardSpace make up the majority of new features in .NET 3.0.


Now, that we know a bit of background on WPF, let’s get started! First, create a new WPF application using File > New > Project. Select a WPF Application in C# and save it where you feel fit.
We’re first going to examine the code in the WPF Template.
XML
<Window x:Class=<q>WpfApplication1.Window1</q>
    xmlns=<q>http://schemas.microsoft.com/winfx/2006/xaml/presentation</q>
    xmlns:x=<q>http://schemas.microsoft.com/winfx/2006/xaml</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>
    <Grid>
        
    </Grid>
</Window>  
What the above does is creates our window, and places a grid in it.
This code is in XAML, an XML-like language used with WPF. Every tag can represent either an object, like a grid or a button, or a property not defined within the main tag. While that last part about the properties may sound confusing, worry not, as I’ll explain that in-depth later.
Now, let’s go ahead and create our first functional application, which (you guessed it) is a Hello World program.
Delete the Grid tags so the code looks like this:
XML
<Window x:Class=<q>WpfApplication1.Window1</q>
    xmlns=<q>http://schemas.microsoft.com/winfx/2006/xaml/presentation</q>
    xmlns:x=<q>http://schemas.microsoft.com/winfx/2006/xaml</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>
</Window>
Now, we’re going to add an object of the button class using this XAML. Add this code in your Window Tag:
XML
<Button></Button>
This tag is equivalent to this C# code:
C#
new Button();
Now, this C# code doesn’t actually create a button on screen, only instances a button class. We’d have to mess with some other stuff to get this on screen in the window. However, the underlying concept is the same.
Notice that there is no variable name associated with our new button. In XAML, we have to set an object’s Name property for the object to have a name.
With that said, we can come up with this code:
XML
<Button Name=<q>myButton</q>></Button>
This is fundamentally equivalent to this C# code:
C#
Button myButton = new Button(); 
Bear in mind that writing this XAML will actually create an object accessible in the associated C# code:
XML
<Button Name=<q>myButton</q>></Button>
This means that when myButton is declared in the XAML, we can change its properties in our C# code, like this:
C#
myButton.Background = Brushes.Black;
We can also set properties in XAML, like this:
XML
<Button Background=<q>Black</q>></Button>
Now, let’s get back to our code. We’re going to create a button and set its Name property, and its click event handler, then have some C# code execute when we click the button.
Create a new button with the name HelloWorld, like this:
XML
<Button Name=<q>HelloWorld</q>></Button>
Now, set the Click event handler to a new event. Type Click after the name property, and let Intellisense fill in this: Click=&quot;&quot; Now, let it make a new method for the event handler by clicking <New Event Handler>.
Now, your Button tag should look like this:
XML
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>></Button>
Now, we’re going to fill in between the start and end button tags with the text on the button. Coding this would result in a button with the text “Hello, World!” on it:
XML
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>Hello, World!</Button>
There is also another way to set what is between tags. We can set the Content property to what we want inside the tags, as long as we don’t have any nested tags inside the main tag. This applies for normal properties, too. So, this would yield the same results as what we coded before:
XML
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q> Content=<q>Hello, World!</q>/>
Anyway, change it back, because we’re going to to a bit more with this button. Now, let’s experiment with the Background property:
XML
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q> Background=<q>Gray</q>>
    Hello, World!</Button>
This turns our button gray. However, we can apply more complex types of backgrounds, by expanding the Background property out into its own Button.Background tag. Consider the following:
XML
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
    Hello, World!

    <Button.Background>
        <LinearGradientBrush>
            <GradientStop Offset=<q>0</q> Color=<q>Black</q>/>
            <GradientStop Offset=<q>1</q> Color=<q>Gray</q>/>
        </LinearGradientBrush>
    </Button.Background>
</Button>
Add this into your Window tag and hit F5 to run the program. You’ll notice that now you have a button with a gradient going from black in the upper-left corner, to gray in the bottom-right.
Let’s examine further. The Button.Background tag allows for one to add more complex and nested brushes (colors and things). The next nested tag, LinearGradientBrush defines a LinearGradientBrush. We can set more of its properties, like StartPoint and Endpoint, but those won’t be covered.
Inside the LinearGradientBrush tag are two GradientStops . Those are the colors used in the gradient. Experiment with adding another GradientStop. Why doesn’t it show up? It’s because we need to mess with the offsets a little. The maximum offset number to show equal parts of each color is 1, so we need to divide 1 (maximum offset number to show equal parts of each color) by 2 (there are three gradients, but the first shows no matter what the offsets are on the others). So this gives us increases of .5 for each GradientStop.Offset.
Your 3-gradient code will look like this:
XML
 <Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
    Hello, World!

    <Button.Background>
        <LinearGradientBrush>
            <GradientStop Offset=<q>0</q> Color=<q>Black</q>/>
            <GradientStop Offset=<q>.5</q> Color=<q>Gray</q>/>
            <GradientStop Offset=<q>1</q> Color=<q>Antique White</q>/>
        </LinearGradientBrush>
    </Button.Background>
</Button>
Now, let’s stay with our original code with only two offsets. Let’s now start on the C# part. Right click on the start of the button tag, and click Navigate to Event Handler. Because we defined a Name property for our Button, we can access our Button by name, just like any other object. So, now we’re going to add some code that changes the button’s text and disables it. Add this in your HelloWorld_Click method:
C#
HelloWorld.IsEnabled = false;
HelloWorld.Content = <q>Clicked</q>;
This should be pretty self-explanatory. It sets the IsEnabled property to false, disabling the button, and then sets to Content property to “Clicked”. Remember that the Content property is equivelent to whatever is between the main tags of an object, but not a tag nested in the main tag. Your final XAML should look like this:
XML
<Window x:Class=<q>WpfApplication1.Window1</q>
    xmlns=<q>http://schemas.microsoft.com/winfx/2006/xaml/presentation</q>
    xmlns:x=<q>http://schemas.microsoft.com/winfx/2006/xaml</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>
    <pre lang=&quot;xml&quot;>    <Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
        Hello, World!
        
        <Button.Background>
            <LinearGradientBrush>
                <GradientStop Offset=<q>0</q> Color=<q>Black</q>/>
                <GradientStop Offset=<q>1</q> Color=<q>Gray</q>/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
</Window>  

And your final C# should look like this:
C#
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;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            
        }

        private void HelloWorld_Click(object sender, RoutedEventArgs e)
        {
            HelloWorld.IsEnabled = false;
            HelloWorld.Content = <q>Clicked</q>;
        }
    }
}
Thanks for reading, and more WPF tutorials are on the way!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionAsk for Help Pin
dearcyrix18-Sep-08 15:10
dearcyrix18-Sep-08 15:10 
AnswerRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:19
Zane Kaminski18-Sep-08 15:19 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:33
dearcyrix18-Sep-08 15:33 
GeneralRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:36
Zane Kaminski18-Sep-08 15:36 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:40
dearcyrix18-Sep-08 15:40 
GeneralRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:44
Zane Kaminski18-Sep-08 15:44 
You have to use the ListViewItem constructer...

ListViewItem ItsName;

That won't work.

You need something like ListViewItem ItsName = new ListViewItem();
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:48
dearcyrix18-Sep-08 15:48 
GeneralRe: Ask for Help Pin
Zane Kaminski19-Sep-08 12:02
Zane Kaminski19-Sep-08 12:02 
GeneralRe: Ask for Help Pin
Aslesh22-Sep-08 3:08
Aslesh22-Sep-08 3:08 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:44
dearcyrix18-Sep-08 15:44 
GeneralWIN32 is dead, RIP Pin
Paul Sanders (the other one)15-Sep-08 8:52
Paul Sanders (the other one)15-Sep-08 8:52 
GeneralRe: WIN32 is dead, RIP [modified] Pin
Zane Kaminski15-Sep-08 10:29
Zane Kaminski15-Sep-08 10:29 
GeneralNice... Pin
RizwanSharp15-Sep-08 6:47
RizwanSharp15-Sep-08 6:47 
GeneralRe: Nice... Pin
Zane Kaminski15-Sep-08 7:28
Zane Kaminski15-Sep-08 7:28 
GeneralRe: Nice... Pin
RizwanSharp15-Sep-08 7:55
RizwanSharp15-Sep-08 7:55 
GeneralExcellent! Pin
The Cake of Deceit13-Sep-08 2:48
The Cake of Deceit13-Sep-08 2:48 
GeneralI have approved this article Pin
leppie12-Sep-08 22:39
leppie12-Sep-08 22:39 
GeneralRe: I have approved this article Pin
Zane Kaminski13-Sep-08 6:06
Zane Kaminski13-Sep-08 6:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.