Windows Presentation Foundation (WPF)

WPF or Windows Presentation Foundation is an exciting presentation technology from Microsoft shipped in the .NET Framework 3.0 Version along with other technologies called Windows Communication Foundation, Windows Workflow Foundation, and Windows CardSpace.

It has been in the air since long back and I always used to wonder why some critical business application would require such a flashy jazzy user interface technology. Now that I got a chance to work in WPF, I am slowly realizing its benefits and potential.

Earlier the applications were command prompt based. Then came the GUI (Graphical User Interface) revolution that introduced the end users to windows, buttons, drop downs and so forth. But after that, there has been nothing exciting in the user interface world for desktop applications, though the web went through a fabulous UX (User Experience) change. Windows Forms that appeared with .NET was just a better version of old GUIs.

Now there is WPF with an entirely new set of features and technologies that makes it possible to define the UX of desktop application user to a new level. Of course Windows Forms will continue to be in the field, especially for LOB (Line Of Business) applications, but WPF can be used to make compelling data visualizations for applications that require a pleasing user experience.

Developing stunning applications in WPF is much easier than we might think of. In earlier technologies audio, video, etc were islands in an application. With WPF, a single API can be used for all of this. A video can be part of an application just like a button or label.
For example the below code snippet creates a Windows Vista Style Button with content as a playing video.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button Height="100" Width="200">
  <Button.Content>
    <MediaElement Source="C:\Users\Public\Videos\Sample Videos\Butterfly.wmv" />
  </Button.Content>
</Button>
</Page>

The new XAML language helps in creating the UI layer keeping the business logic separately in the code behind files. With features like Templates, Styles, and Animations WPF is opening up a new arena where a normal developer can now create ‘cool’ apps!

Playing with XAML

Years back, when I saw HTML in action for the first time I was completely amazed. With just a Notepad and Browser I could do wonders! It was the same feeling I had when I saw XAML in action during the TechEd 2005 at Bangalore. One of the speakers opened up something called XAML Pad and then typed in few tags and voila… it immediately rendered the windows controls! I wanted to experiment XAML then but the heavy SDK downloads and Beta version issues kept me from it. Now my new job at IdentityMine gives me plenty chances to play with XAML.

XAML or eXtensible Application Markup Language is a new declarative programming language that can be used to define the UI elements for latest .NET technologies like WPF (Windows Presentation Foundation) and Silverlight. It helps to separate the design from code, in an ASP.NET passion where the UI can be defined in XAML and the business logic can be implemented through the attached code behind files. Designers can now use the new tool called Expression Blend to design user interfaces without writing any code and the generated XAML can be used in Visual Studio by a developer to implement its business logic.

XAML is so easy to use. It’s just some tags and their attributes. Below is a screen shot from Visual Studio 2008 where XAML code is shown at the bottom and the rendering is shown at the top.



As shown in the image, a button can be defined by Button tag as below:

<Button Content="Click Me" Height="50" Width="100" Click="Button_Click"/>

And in the code behind, we can write as below:

private void Button_Click(object sender, RoutedEventArgs e)
{
  MessageBox.Show("Clicked!");
}

On running this code, it produces a nice Vista style button as shown below:



Easy way to learn XAML is by playing with it. You can use Notepad to create a file with .xaml extension and make sure you include your XAML controls within the Page tags as shown below:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Button Content="Click Me" Height="50" Width="100"/>
    </Grid>
</Page>

Open this *.xaml file in Internet Explorer 7.0 or Fire Fox 2.0 or higher to see it rendered.If you don’t have Visual Studio 2008 installed, try tools like XAML Pad that comes with the SDK. It works as an independent tool even if you don’t have the SDK installed. Download it from here (it’s just 316 KB) and make sure you have .NET Framework 3.0 or higher installed.If you like to have color coding and intellisense plus few more cool features, download Kaxaml from http://www.kaxaml.com/

Of course you won’t be able to wire up code using these tools, but you can experiment a lot with XAML creating all kinds of fancy UI elements.