Click here to Skip to main content
12,293,576 members (61,826 online)
Click here to Skip to main content
Add your own
alternative version


40 bookmarked

Introduction to WPF

, 12 Sep 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This tutorial shows you some of the basics of a WPF program, and shows you how to create a WPF Hello World application.


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.
<Window x:Class=<q>WpfApplication1.Window1</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>
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:
<Window x:Class=<q>WpfApplication1.Window1</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>
Now, we’re going to add an object of the button class using this XAML. Add this code in your Window Tag:
This tag is equivalent to this C# code:
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:
<Button Name=<q>myButton</q>>
This is fundamentally equivalent to this C# code:
Button myButton = new Button(); 
Bear in mind that writing this XAML will actually create an object accessible in the associated C# code:
<Button Name=<q>myButton</q>>
This means that when myButton is declared in the XAML, we can change its properties in our C# code, like this:
myButton.Background = Brushes.Black;
We can also set properties in XAML, like this:
<Button Background=<q>Black</q>>
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:
<Button Name=<q>HelloWorld</q>>
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:
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
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:
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
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:
<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:
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q> Background=<q>Gray</q>>
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:
<Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
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:
 <Button Name=<q>HelloWorld</q> Click=<q>HelloWorld_Click</q>>
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:
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:
<Window x:Class=<q>WpfApplication1.Window1</q>
    Title=<q>Window1</q> Height=<q>300</q> Width=<q>300</q>>

And your final C# should look like this:
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
    /// <span class="code-SummaryComment"><summary></span>
    /// Interaction logic for Window1.xaml
    /// <span class="code-SummaryComment"></summary></span>
    public partial class Window1 : Window
        public Window1()

        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!


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


About the Author

Zane Kaminski
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionAsk for Help Pin
dearcyrix18-Sep-08 15:10
memberdearcyrix18-Sep-08 15:10 
AnswerRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:19
memberZane Kaminski18-Sep-08 15:19 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:33
memberdearcyrix18-Sep-08 15:33 
GeneralRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:36
memberZane Kaminski18-Sep-08 15:36 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:40
memberdearcyrix18-Sep-08 15:40 
GeneralRe: Ask for Help Pin
Zane Kaminski18-Sep-08 15:44
memberZane Kaminski18-Sep-08 15:44 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:48
memberdearcyrix18-Sep-08 15:48 
GeneralRe: Ask for Help Pin
Zane Kaminski19-Sep-08 12:02
memberZane Kaminski19-Sep-08 12:02 
GeneralRe: Ask for Help Pin
Santhapur22-Sep-08 3:08
memberSanthapur22-Sep-08 3:08 
GeneralRe: Ask for Help Pin
dearcyrix18-Sep-08 15:44
memberdearcyrix18-Sep-08 15:44 
GeneralWIN32 is dead, RIP Pin
Paul Sanders (AlpineSoft)15-Sep-08 8:52
memberPaul Sanders (AlpineSoft)15-Sep-08 8:52 
GeneralRe: WIN32 is dead, RIP [modified] Pin
Zane Kaminski15-Sep-08 10:29
memberZane Kaminski15-Sep-08 10:29 
GeneralNice... Pin
RizwanSharp15-Sep-08 6:47
memberRizwanSharp15-Sep-08 6:47 
GeneralRe: Nice... Pin
Zane Kaminski15-Sep-08 7:28
memberZane Kaminski15-Sep-08 7:28 
GeneralRe: Nice... Pin
RizwanSharp15-Sep-08 7:55
memberRizwanSharp15-Sep-08 7:55 
GeneralExcellent! Pin
The Dogcow Farmer13-Sep-08 2:48
memberThe Dogcow Farmer13-Sep-08 2:48 
GeneralI have approved this article Pin
leppie12-Sep-08 22:39
memberleppie12-Sep-08 22:39 
GeneralRe: I have approved this article Pin
Zane Kaminski13-Sep-08 6:06
memberZane 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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 12 Sep 2008
Article Copyright 2008 by Zane Kaminski
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid