Basics of WPF, XAML and WPF/e

I’ve mostly blogged about .NET in general and web development in particular so far. Today, let’s dive a bit into Windows programming using Windows Presentation Framework (WPF).

User32 and Gdi32 have been at the core of Windows programming for a while.
WPF is part of .NET since version 3.0. it ships with Vista. It Requires .NET. VS 2008 came with .NET 3.5.
WPF uses the eXtensible Application Markup Language (XAML).
It’s a user interface framework. The use of User32 and GDI32 goes back to the first 16 bits version of Windows. The programming model, computer and graphics industry have evolved a lot since that time. And more power has been moved to graphics cards. Some of them have even more memory and processing power than computers we used a decade ago. 3D acceleration has pushed the resolution to another level.

Then came WPF. It put the power back to the reach of ordinary user interfaces. You don’t need specific instructions to be DPI aware. It suits higher resolution application development.

WPF use XAML which allows designers to be more involved in the development of the application.

Before WPF, we already had: HTML, Win32, Flash and DirectX. Each of them work individually great, but making them work together is really difficult. WPF provides a single integrated solution on one cohesive platform. Composability is WPF single best feature. – Read again the previous sentence 🙂

If you start with WPF, you can use a nice tool like XamlPad. Its latest version is available on its author’s blog here.
It allows you to type in Xaml code and see the appropriate UI. I find it pretty useful. It’s like using LinqPad, JQueryPad, but for other purposes obviously. I did the screenshot below from XAMLPadX 4.0

WPF won’t allow having more than one child inside a Button element. The reason is so that the button doesn’t have to handle how the children are rendered. To support that, I can use a StackPanel and put my objects inside it.

WPF contains several components.

05_WPF Design
DirextX has WPF gets pixels on the screen. The Direct3D pipeline is used to render everything. The Composition Engine, also called Media Integration Layer takes different kind of media (Video, Text, …) and render them. MIL is unmanaged code. The reason is because it needs to talk to DirectX, which used COM APIs.

Using COM from .NET requires to go through Interop and can burn a lot of memory if we need to render many objects.

On top of the MIL, we have PresentationCore.dll and PresentationFramework.dll. The former is more or less the public face of MIL. The later provides high level services and implement databinding, commands, etc…
We have a separation between the core and the framework in order to avoid dependency. Imagine a Browser application which used WPF for rendering. This application won’t need the framework elements because it has its own way for handling that part. It allows to use the Rendering service without using the framework.
WPF uses the 3D aspect of your graphic card even when rendering 2D objects.

XAML is not only the most used element about WPF, it’s also the most misunderstood.
First WPF doesn’t need XAML. Second, XAML doesn’t need WPF. They are 2 separate pieces of technology. XAML is rarely more than a language to create .NET objects. Therefore Elements in XAML corresponds to Objects in .NET, while attribute correspond to properties. Therefore we can substitute some .NET code to our XAML.
XAML also use the .NET Type Converter feature in order to properly generate types for .NET properties. Anything you can do in XAML, you can do in code. Be careful of not getting into the trap of trying to do everything in XAML. XAML is great, but it’s not always the best choice.

Here is some simple XAML code that produces a button containing an ellipse.

02_ButtonAndEllipse


Silverlight use the same XAML language, but with different objects.

XAML is optional, but despite that, it is at the heart of WPF design. It’s UI is based on trees of objects.
WPF use Events and Commands to handle how you respond to events.

The appearance of a control in WPF is separetly handled by a Template. That means controls in WPF are intrinsicly lookless.

07_Ellipse not Showing_TextBlock
XAML use Markup Extension which are objects that define at runtime how objects properties are going to be set. We use curly braces inside properties’ values to set them.

In the previous screenshot, you can notice that the Ellipse element is not appearing in the rendered UI. The reason for that is we currently use the TextBlock element, which only knows how to render Text. You can use the ContentPresenter element if you want to render diverse types of elements. Let’s see how it works.

08_Ellipse is Showing_with ContentPresenter

Now we have the Ellipse control which is displayed. Template binding automatically binds to the content of our Button element.
XAML use panels in order to handle elements’ organization. Any place in the tree where you need to display multiple elements, a panel will almost always be necessary.

09_Layout
One of most important features of WPF programming in Databinding. It tends to be used pretty much anytime you want to display objects on the screen. One particular useful feature is DataTemplates. Whereas ControlTemplate elements define how a control should look, a DataTemplate define how particular type of data should look. The need for grids is greatly reduced in WPF, due to the use of DataTemplates.

Deployment
After you write WPF applications, you can deploy them through one of the following ways:
Classic MSI, ClickOnce, XAML Browser Application (XBAP). You can also use new features provided by .NET 3.5, like setup boostrapper.
Silverlight original code name was WPF/e where ‘e’ means Everywhere. Its first version shipped in 2007. 2nd version supports C#, VB.NET, Python, Ruby, etc.
The Linux version uses the Mono platform.
Silverlight doesn’t do hardware acceleration. This is mainly because it has to make sure it is compatible to every browser.

Designers
You can use Expression Blend or Visual Studio in order to create your XAML code.
Many developer prefer using Blend over Visual Studio for the designing part.
Blend uses the same MSBuild build tool like Visual Studio.

I recommend using Visual Studio for editing the XAML or C# server side code and Expression Blend to work on the interactive part.
Here is how Blend looks like.

10_Expression Blend

Resources
XAML
XAMLPad on Msdn
XAMLPadX
Creating DPI aware applications

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s