KIRUPA.CHINNATHAMBI

When you write a program, unless it is command-line based, it needs to have some user interface (UI). The interface can be very simple like a window with a button, or it can be more complicated with scrolling lists, drop-down menus, etc. Unless you are using a very low level language, you do not worry about how the various UI elements (commonly called controls) are implemented. You just use them and expect them to work.

When you use some code to create, for example, a Button object, a button is displayed when you test your application. But where did the button actually come from? When you press a button, it’s style and color changes to indicate that i has been pressed. Who defined how the button would behave when it is pressed? Besides clicking on the button, I can also use my keyboard to select it, so how are input events handled? What is the Matrix?

Here is an example of a button and how it looks when the mouse cursor presses on it:

In this post, I will answer most of the questions that concluded the previous paragraph by looking at the Windows Presentation Foundation (WPF). Like I’ve mentioned in previous posts, one of the new features introduced as part of the .NET Framework 3.0 is WPF. WPF is basicaly an Application Programming Interface (API) that exposes functionality to developers.

The functionality WPF exposes is primarily related to what your applications will display on the screen. WPF handles not only how your above button behaves, but it also takes care of a host of multimedia tasks such as the user interface, 3D, animation, sound, video, graphics, data binding, and more. As a developer, this is nice, because you now have a consistent programming model for accessing all of the neat features you would want your application to have. Best of all, you do not have to worry about how to actually implement some of the more hairy details.

Now that you have a basic idea of what WPF is, let’s dig a little deeper. You can add WPF content to your application in two ways: via code or markup. The code approach is straightforward, and you use a CLS-compliant language such as C# and explicitly declare what you want to create and customize:

Button clickMe = new Button();

clickMe.Content = “Click Me”;

clickMe.Width = 80;

clickMe.Height = 24;

The second approach is a little different in that you declare your button in a separate markup file called XAML.

<Button x:Name=“btnClick” Content=“Click Me” Width=“80″ Height=“24″/>

XAML (pronounced as zammel) is an XML-formatted file that is kept separate from your code file. Your code file contains your application logic, and the XAML file contains the markup required to display things based on the logic. The thing to remember is that, it doesn’t matter which approach you use to declare your button. In the end, there is nothing you can do in XAML that you will not be able to do using C# (or other language) code.

The best way of describing how XAML and your code file interact would be to take HTML and CSS as an example. Your content is stored in the HTML file, but the presentation information is stored in a separate CSS file. Much like CSS, you can use any program to write XAML files – ranging from Notepad to a GUI-based editor such as Blend. The similarities between CSS and Blend end at a point though, for XAML is more powerful and goes well beyond styling. For example, you actually have the potential to create an application using nothing but XAML itself such as my RSS Viewer.

Even though you have two ways of adding WPF content, they are not exclusive. You can use a combination of both markup and code to create your application. For example, many of my posted WPF examples use a combination of both markup and code where I used Blend to create the basic layout in XAML but used Visual Studio for doing everything else!

To wrap up, at the beginning I used a button as an example of things that just seem to work. We don’t worry about how it works, for those details are handled by the framework itself. In reality, what we really see is only the tip of the iceberg of what goes on behind the scenes for something as simple as, for example, a mouse click. Thankfully, a GUI library such as WPF (or Swing, Flash, etc.) take care of this for you.

Cheers!
Kirupa