Travis Isaacs

Father of two. Fitness & food junkie. Co-founder of Front Desk. Creator of Keynote Kung-Fu. Grapevine, TX.

A Fanboy Professes his Love for XAML

05 Jul 2009

This post is ancient history. My apologies for any dead links or broken images.

I’m working on a Windows Presentation Foundation (WPF) application at WinForms, and mastering the GDI. Scary, right? WPF uses an XML-like presentation language called XAML to describe the UI. WPF can do some really neat things, like shader effects, hardware accelerated 3D, and much more (stuff that a real developer could explain).

I started the project kicking and screaming. I just couldn’t shake my HTML/CSS muscle memory, making translating my interface ideas into reality was truly an exercise in frustration. I need an HTML-to-XAML translator for my brain, and there just isn’t one.

After a few months of trial and error, I’m finally comfortable with XAML, and I have to say, I freaking love it. Ok, maybe love is a strong word, but I am definitely in like with it. I like it so much so that idea of building an interface with tools like HTML and CSS seems just plain silly when you think about.

Style Resources

There has been a lot of cool work to allow front-end developers to use a more object-oriented approach to their CSS. One example would be to create variables for things like colors, and refer to them later. Because your colors are abstracted into variables, you only need to change them in one place. One example (in pseudo-code) might be:

$microsoft_blue: #5ea3d6;
#header{
  background:$microsoft_blue;
}

I XAML, you can abstract things like colors, gradients (booyah!), and even background images as “resources” that can be consumed by other styles:

<LinearGradientBrush x:Key="ButtonBackground" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#3FFFFFFF" Offset="0" />
      <GradientStop Color="#00000000" Offset=".5"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

In the above example, we created a linear gradient background, gave it a key, and created a style that consumes that resources. Freaking. Awesome.

Styles & Triggers

In XAML, interactive behaviors (like clicks, mouse overs, toggled, etc) are a part of an element’s styles. Here is a really rudimentary style for a button:

<Style TargetType="Button">
  <Setter Property="Background" Value="Red" />
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Maroon" />
    </Trigger>
  </Style.Triggers>
</Style>

In the simple example above, I want all my buttons to have a red background and turn maroon when they are moused over. Now all my buttons will have this style and behavior.

Control Templates

The “lookless” control in WPF is an extremely powerful, brain-melting concept. The idea is that an interface control’s look can be modified in anyway, but the control will retain it’s inherent properties.

This is was makes WPF superior to other UI toolkits like Java’s Swing and SWT which are extremely limited in their customization. In HTML, common form elements cannot be styled or modified.

Ever want to change the look of a box? Good luck. With WPF, your box (which is a “ in XAML) can either look like the Windows default theme, or completely changed, everything from the color to how long the drop-down takes to open. Best of all, making these customizations is really straight forward and doesn’t require you to write a single line of C# code.

XAML and HTML/CSS aren’t even in the same galaxy

XAML was solely written to build interfaces, which is in stark contrast from HTML’s roots as a document formatting language thats been hacked up and layer upon. A traditional rich web application uses HTML (and probably some server-side language) to deliver the basic structure, CSS for layout, presentation, and text formatting, and then a layer of Javascript on top to handle the interactivity that HTML can’t do, and probably some data exchange.

Because XAML was purpose built for UI all of the layout, styling, and interactivity are baked-in without a need for the complex UI “stack” of a traditional HTML web app. HTML and CSS3 show some promise of bringing a real UI toolkit to the web, but are still a far cry from what we need.