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:
A WPF implementation of the same application can be like this:
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),
the XAML representation of the application UI will look like this:
CODE
<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:
Special Tutorial Requirements:- Visual C# 2008 Express
- .NET Framework 3.0
So, let's start.
1. Create a standard C# WPF Application:
Now, you can see the development environment:
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:
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:
CODE
<TextBox Height="23" HorizontalAlignment="Left" Margin="10,70,0,0" Name="textBox2" VerticalAlignment="Top" Width="150" />
This is how the window looks now:
3. Let's take a look at the code now. The default code for the App.xaml.cs looks like this:
csharp
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:
csharp
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.
Introduction to WPF (C#), Introduction to Windows Presentation Foundation (C#)
18 Jul, 2008 - 12:28 AM
|