Developer's Connection
by: Scott Jackson, MCT
Introduction to WPF
WPF is the next-generation presentation system for building client applications in the Windows operating system. You can use it to build a range of Windows-based applications, from a simple word processor or media player to an enterprise-level line-of-business application.
By using WPF, you can create both stand-alone and browser-hosted applications.
The cool part of WPF is that it can inject some much needed style into the traditional windows form – in effect making them more like a website. XAML, the markup language that WPF uses, will look familiar to HTML coders. You create your UI definitions in XAML, and they are stored in files that have the .xaml file name extension.
Everything that you can do in markup language, you can do in code. Therefore, you do not have to use XAML; you can build your UI by using code. If you are working in WPF, you should really be working in XAML though.
Let’s take a look at some basic XAML (with some spacing added for readability):
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Background="White">
<Rectangle Margin="190,86,196,102"/>
</Grid>
</Window>
Stepping through this short code, we can see that the <Window> element is on top, and defines the height and width of the MainWindow.
We are creating a rectangle inside of a grid. The Rectangle itself has its margins set as an attribute, and creates a form that looks like:

Next up, I am going to add a Fill tag to this rectangle, and use brushes to paint the insides with a nice gradient.
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Background="White">
<Rectangle Margin="190,86,196,102">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LightBlue" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
The result is:

I could also add animations, and I could turn a rectangle like this into a button or another control!
We could have made this in C# or VB.NET, but the XAML code is much easier to read – and it separates our design from our development. This is a technology that is well worth looking at for future projects.
Cheers,
Scott
If you want to give Scott feedback on this article, email him @ sjackson@neweratechology.com
|