Page 1 of 1

Introduction to WPF (C#) Introduction to Windows Presentation Foundation (C#)

#1 PixelCard  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 47
  • View blog
  • Posts: 139
  • Joined: 20-June 08

Posted 18 July 2008 - 12:28 AM

In this tutorial I will explain what is WPF, and how to use it with C#. This tutorial shows you only the basic ideas of WPF, so you can get acquainted with the technology and see its advantages and disadvantages.

WPF (Windows Presentation Foundation - also know as Avalon) is a subsystem of .NET Framework (introduced in .NET Framework 3.0), based on XAML (Extensible Application Markup Language). Using WPF, the developer can create a unique UI (user interface) for the application. So, if a simple WinForms application looks like this:

Posted Image

A WPF implementation of the same application can be like this:

Posted Image

And that was created just by changing some basic properties. In WinForms, the developer had to use GDI+ or special controls to build such an UI.

Now, there is a clear separation between the application UI and it's functionality.

The whole application UI is described using XAML, which is based on XML. Basically, if I create a window with some text fields and a button (the image below),

Posted Image

the XAML representation of the application UI will look like this:

<Window x:Class="WpfApplication1.Window1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="Window1" Height="300" Width="300">
	<Grid>
		<TextBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
		<TextBox Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
		<TextBox Height="23" HorizontalAlignment="Left" Margin="10,76,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" />
		<Button HorizontalAlignment="Left" Margin="10,109,0,130" Name="button1" Width="75">Button</Button>
	</Grid>
</Window>



As you see, every control in the form is described by a specific tag with specific attributes, describing the control properties.

WPF applications can be both local and web-based (these are called WPF Browser Applications). Silverlight is also a kind of a web-implementation of WPF (it was even called WPF/E - Windows Presentation Foundation Everywhere). As this tutorial is an introduction to WPF, I will show how to create a local application.

The main WPF features are:
  • Any WPF application is a Direct3D application.
  • Support for different media formats.
  • Interoperability with WinForms.
  • Support for time-based animations.
  • Application windows can be of different shapes.
  • Different bitmap effects for different controls.


However, for a developer who used WinForms before some aspects may appear strange. One of such aspects is the absence of many controls, that were present in the standard Windows Forms Application (for example the Timer control).

Here is a screenshot of the WPF toolbox:

Posted Image



Special Tutorial Requirements:
  • Visual C# 2008 Express
  • .NET Framework 3.0


So, let's start.

1. Create a standard C# WPF Application:

Posted Image

Now, you can see the development environment:

Posted Image

The development environment UI (user interface) is a little bit different from the WinForms development environment, but many parts of it look familiar to a Visual Studio developer (like the Toolbox or the Properties grid). Also, you can see that there is now a zooming tool in the upper left corner of the designer.

There is also a tab with the text 'XAML' on it. This is the place where all the parts of the application UI are described through special tags with specific attributes.

2. I will put on my form just a TextBox control and a Button control:

Posted Image

As you see, right after I added the controls to the window (in a WPF project the main container is called window, not form), in the XAML window appeared two tags with attributes, describing the control. You can put controls on the window even without using the Toolbox. You just have to enter the control tag and set its properties. I will now add a TextBox control to the window by adding a TextBox tag. Here is the XAML code I used:

<TextBox Height="23" HorizontalAlignment="Left" Margin="10,70,0,0" Name="textBox2" VerticalAlignment="Top" Width="150" />



This is how the window looks now:

Posted Image

3. Let's take a look at the code now. The default code for the App.xaml.cs looks like this:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Windows;

namespace wpfIntroduction
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
    }
}




This code is representing the whole application.

The project also contains Window1.xaml.cs. Take a look at its code:

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 wpfIntroduction
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}



This code is representing the Window1. If you create new windows, the default code for them will look like this.

WPF applications created with C# are using standard C# code, so you don't have to learn another programming language if you want to use WPF (by the way, WPF is also available in VB.NET).

At the end, I want to mention, that some namespaces available in a WPF application are not available in a WinForms application (for example, the System.Windows.Controls namespace), and some namespaces, available in a WinForms application (for example the System.Windows.Forms namespace) are not available in a WPF application, so don't be surprised, if you don't find something you used in a WinForms applications in your WPF application.

Attached File(s)



Is This A Good Question/Topic? 3
  • +

Replies To: Introduction to WPF (C#)

#2 papuccino1  Icon User is offline

  • His name was Robert Paulson.
  • member icon

Reputation: 63
  • View blog
  • Posts: 1,121
  • Joined: 02-March 08

Posted 30 May 2009 - 09:09 AM

Nice tutorial but I have a small request: Delete the 2nd Post!!! He's just quoting you and not saying anything.

I'm looking forward for the 2nd tutorial. Maybe you could build a snazzy looking calculator?
Was This Post Helpful? 1
  • +
  • -

#3 ladyinblack  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 9
  • View blog
  • Posts: 419
  • Joined: 08-April 09

Posted 06 September 2009 - 04:53 AM

Hi, I've never worked with C# before, and winForms, so for a first timer (that's me), I enjoyed doing this tutorial. It was quick easy, and gives the gist of the use of C#.
Thanks.
Was This Post Helpful? 1
  • +
  • -

#4 khokon  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 8
  • Joined: 03-July 09

Posted 20 January 2010 - 11:09 PM

thank you i need more detail about wpf
please help me
Was This Post Helpful? -2
  • +
  • -

#5 Guest_venu*


Reputation:

Posted 05 March 2010 - 12:16 AM

yes helpful to me,,,,,i need more examples
Was This Post Helpful? -1

#6 RexGrammer  Icon User is offline

  • Coding Dynamo
  • member icon

Reputation: 181
  • View blog
  • Posts: 777
  • Joined: 27-October 11

Posted 04 January 2012 - 11:33 AM

Another great thing is that WPF and WinForms have great interoperability:

You can add references to the System.Windows.Forms assembly and WindowsFormsIntegration and use all of the WindowsForms control in a WPF application. You also have to add a reference to the Window class definition:
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"



Then you have to drag a WindowsFormsHost from the toolbox to the program, and you can then add WinForms controls like this (the only limitation is that they have to be inside the host):
<wf:DateTimePicker Name="myDateTimePicker/>



And when you need to reference it in code you can use:

System.Windows.Forms.DateTimePicker myPicker = theHostName.Child as System.Windows.Forms.DateTimePicker;


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1