WinFX: Windows Presentation Foundation (WPF) and XAML - You Can Start Today
 
Published: 08 Nov 2005
Unedited - Community Contributed
Abstract
In this article, Glen gives a brief introduction to Microsoft's new Windows markup language, XAML, and also gives a simple example on how to use this new technology.
by Glen Sollors
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 20492/ 30

Introduction

If you have ever seen a Microsoft Windows Presentation Foundation (WPF, formerly ‘Avalon’) application run, you will be sold on how it will revolutionize the computer user experience. The first word of out of my mouth when I saw a demo was “Cool.” Since .COM went .BUST, almost everyone in the information technology (IT) space has been waiting for the Messiah of IT to present itself. In WPF, it has arrived and will change the way we do business.

Today, both developers and designers are starting to grasp what WPF is all about. WPF is the next generation of Microsoft’s presentation subsystem, which is a key part of Microsoft Windows Vista. Also bundled in WinFX is Windows Communication Foundation (WCF, Formerly ‘Indigo’). WCF provides the infrastructure to develop web services and the communication to present in WinFX. Both of these technologies will dramatically improve customer user interface (UI), application convergence, collaborative communication, and security, as well as maximize our computer hardware capabilities. WinFX will change the way we develop and design applications. User interfaces will be revolutionized by allowing for features such as:

  • Fixed and flow format documents
  • 2D and 3D vector graphics
  • Animation
  • Multimedia
  • Data binding

WPF UI creation is done in conjunction with a new declarative markup language called extensible application markup language (XAML). Derived from the extensible markup language (XML), XAML instantiates objects through WPF. XAML, combined with WPF, allows you to create and control the appearance of document layouts and controls and how objects are bound to databases regardless of where the application will be used. This means that you ultimately only need one markup (XAML) to create a rich UI. As WPF is a .Net technology, you will be able to plug-in and run with this new interface and existing applications by adding only a few lines of code. This also means that the logic is separated from the presentation. A developer can code and the designer can create simultaneously. WPF is so vast that it encompasses and links objects together so that the application will, depending on its root element, run either on your desktop or on the Internet.

The great news is that this technology can be used today! If you are planning to launch any applications next year, now is the time to learn this technology. XAML and WPF currently run on Microsoft XP, Windows Server 2003, and Vista. All you need is the latest software development kit (SDK) for WinFX. The technology is well on its way to being fully baked. Beta 1 Release Candidate was already released in May 2005. Future-focused developers/designers are grasping and implementing the technology today.

If you already know and use the .Net Framework, adopting this technology is a natural progression. Although this technology is currently in Beta (and free to download), Microsoft has opened it up to the development community in order to allow you to have access to it as well as welcoming your feedback on how to make it better.

A Simple Example Using XAML

Creating basic XAML and Windows Presentation Foundation (WPF) 2D Graphics is very easy and is similar to the SVG Syntax.  The following sample shows a line, an ellipse, and a rectangle.  Gradients and text could easily be added to these objects as well.

Sample XAML Rendering

Code for the example is shown in Listing 1.

Listing 1:  Simple 2D Graphic Example

<Canvas Background="#FFFFFFFF">
 
<Panel.Children>
   
<Rectangle Fill="#FF0000FF" Height="72" Canvas.Left="74"
     
Stroke="#FF000000" Canvas.Top="77" Width="131" />
   
<Ellipse CenterX="231" CenterY="76" Fill="#FFFF0000" Canvas.Left="0"
     
RadiusX="55" RadiusY="56" Stroke="#FFA52A2A" StrokeThickness="5" Canvas.Top="0" />
    
<Line Canvas.Left="0" Stroke="#FF008000" StrokeThickness="10" Canvas.Top="0"
     
X1="318" X2="96" Y1="46" Y2="211" />
 
</Panel.Children>
</
Canvas>

If you are building UIs that require common controls such as List Box, Toggle, Check Box, and Calendar, WFP has all these and other common WinForm controls.  It is also easy to add and modify controls to meet your personal needs.

A key differentiator in using WPF is the dependency property system.  It is very important that developers understand dependency properties based on the features they offer and ensuring that they are leveraged.   In WPF both regular and attached dependency properties are used to set the attributes of an object. The easiest way to establish and create a dependency property is using XAML.  Dependency properties can be used for elements such as Data Binding, Animation, and Styling.  Properties can also be created easily and directly through WPF.  The developer really does not have to be concerned with anything else that may be hiding. 

Most public properties on WPF objects have a corresponding static dependency property. The dependency property is used as a key in locating the value of the object you are looking for. Below is what a dependency property looks like in the dependency property system in WPF.

Listing 2 Dependency Property System in WPF

public class DependencyObject
{
  public static DependencyProperty dependencyProperty1 =
    DependencyProperty.Register("Property1", typeof(Int), typeof(Button));
 
  public static DependencyProperty dependencyProperty2 =
    DependencyProperty.Register("Proprty2", typeof(String), typeof(Button));
 
  System.Collections.Hashtable hashTable = new
  System.Collections.Hashtable();
 
  public object GetValue(DependencyProperty dp)
  {
    return hashTable[dp];
  }
 
  public void SetValue(DependencyProperty dp, object value)
  {
    return hashTable.Add(dp, value);
  }
}

Unlike regular dependency properties, ‘attached’ dependency properties are static dependency properties that belong to one class but can be used in another.  Below is a XAML code example.

<Rectangle Fill="#FF0101FF" Height="61" Canvas.Left="65" Stroke="#FF000333"
  Canvas.Top
="33" Width="142" />

Regular dependency properties of the Rectangle include Fill, Height, and Stroke. The Canvas.Top property is an attached dependency property. This property belongs to the Canvas class, but is used by the Rectangle class to specify its X and Y position within a canvas. These properties work well with Canvas, Grid, and DockPanel classes in WPF.

Conclusion

By now, you may be curious to learn more about this technology. If you don’t have the time to dive into the SDK (SDK you can get from the http://msdn.microsoft.com/windowsvista/getthebeta/default.aspx link), why not try a XAML designer?  Mobiform Software Inc. has a XAML designer entirely built on WPF. With Mobiform’s Aurora, you can drag and drop elements on to a document and then wire up your logic to the interface with Visual Studio 2005.  Better yet, integrate Aurora into Visual Studio so the whole process can be even more seamless. Go to www.mobiform.com to learn more about the Aurora and how to download a free beta copy.  Additionally, visit www.xaml.net to learn more about WPF and XAML.

Tomorrow is approaching quickly. XAML and WPF will revolutionize the way we build and display applications.  Check it out today!



User Comments

Title: Good for first face   
Name: Amit Sinha
Date: 2009-03-25 3:10:24 AM
Comment:
Hello Glen,

Nice..

This article help me undertsand that what is WPF.
This gave me direction to move ahead.

GR8
Title: Good One   
Name: Chetan Deshmukh
Date: 2008-03-14 1:07:31 PM
Comment:
Hello Glen,

I am a .NET 3.5 developer and currently working in WPF. This article is very good for beginner to understand basics of WPF.

Thanks,
Chetan Deshmukh
chetan.deshmukh@e-zest.net
Title: verry user friendly   
Name: samar
Date: 2007-04-04 12:12:59 AM
Comment:
It looking very usefull and good user friendly.If MS find and replace the coding for mostof the user needs then it will be the only top most applycation in the world.
Title: Looks promising   
Name: kf
Date: 2007-03-16 1:40:25 PM
Comment:
Very interesting. MS definitely seems to be going in the right direction with their new foundations and SOA approach. The one comment that just kills me here is

"Since there are other smart Open Source mainframes out there I would not recommend code that is only running on one operating system."

I know this is highly debatable but I'm looking for a platform that allows me to do anything a custom needs and products work well together. This open source crap sounds great for developers but is a nightmare in a corporate environment.

Keep going MS, set a vision and align your products that allow us to easily delight our customers. Those that want the open source so you can hodge podge solutions for your customers, use the open source equivalent for WPF. The more developers that provide those types of solutions to their customers the better we look when we go in behind you after the customer has had enough.

For those who are on the fence, a suggestion is to think platforms that work in your customers environment, not solutions that silo information and leave interoperability as a pipe dream.

Good article!
Title: Linux   
Name: Jeroen Haan
Date: 2006-12-02 9:23:40 AM
Comment:
If this is presented as the standard by some near monopolist, what about users of other operating systems?

Since there are other smart Open Source mainframes out there I would not recommend code that is only running on one operating system.

cheers,
Jeroen Haan
Senior Consultant
Title: We need More Details about XAML   
Name: V.Sekar
Date: 2006-08-10 6:07:12 AM
Comment:
it is useful for beginners
Title: how to return a boolean in dependency property   
Name: praveenalwar
Date: 2006-08-10 1:38:42 AM
Comment:
hai,iam registering a "isvertical" property for axis,and i need to find whether the axis is vertical or not.
for that i registered a dp with the name "IsVertical" and of return type"Boolean" ,parent from"Axis".
but iam not able to understand what to return? i mean what code can i write to make sure that the line is vertical and return true for that.please help me sir?
Title: Managing Partner   
Name: Gregory Olinyk
Date: 2006-06-01 11:39:50 PM
Comment:
Herb is always teaching me new things. This looks promising.
Title: Nice   
Name: chandra sekhar.G
Date: 2005-12-09 6:59:06 AM
Comment:
nice one
Title: Goodone   
Name: Vishwanath Kuntala
Date: 2005-12-09 1:09:00 AM
Comment:
Good one for Beginners who wants to know about what is Windows Presentaion Foundation.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-04-24 9:22:32 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search