A Standards-based Look at XAML’s Features

icrosoft’s XAML markup language floats on top of the .NET platform. It is compiled into .NET classes, usually C#, which reduces it to a set of objects. Along with a host of other XML dialects it is an example of a new type of specification for GUIs. This article takes a look at XAML’s tags to see what?if anything?is new in them.

There are many such GUI specifications now, a few being Mozilla’s XUL, Oracle’s UIX, Macromedia’s Flex and the XML files created by the Gnome Glade tool. Although not W3C standards, some of these new GUI specifications are already on the W3C standards track. An example is the box model used within Mozilla’s XUL, which is headed toward inclusion in future CSS drafts.

The original and most popular source of XML definitions is, however, still the World Wide Web Consortium. The W3C is responsible for formalizing XML and many XML applications such as XHTML and SVG. Given that these standards are mostly complete, do we really need all these new XML GUI dialects? Microsoft’s XAML is a new spin on XML-based GUI description languages, borrowing very little syntax from established standards. Let’s see if it’s a radical improvement in some way, or if it’s merely familiar old friends dressed up in new clothes.

XAML vs. CSS2
For this article, I grabbed a handful of W3C standards and a list of XAML tags. I matched the tags up according to functionality where possible, and then sorted them by W3C standards. Here are the results. The first thing that struck me is the way XAML expresses quite a bit of style information using whole tags. Table 1 shows the bits of XAML that closely match aspects of the CSS2 specification:

Table 1. XAML tags that duplicate CSS2 functionality.

XAML Tag

CSS2 Feature

Description

AdaptiveMetricsContext

pt (pointsize), user-defined stylesheets.

Styling of text for maximum user readability

Bold

font-weight : bold

Bold text

Border

border

Borders surrounding other content

FlowPanel

display : block

A multi-line block that reflows when resized

Inline

display : inline

A section of content held within a single line

Italic

font-style : italic

Italic text

PropertyTrigger

pseudoselectors like :hover and :active.

logic bound to common events in the UI

PageBreak

page-break-after

Support for paginated display.

ScrollViewer

scroll

scrolling support for content larger than its viewport.

SmallCaps

font-variant : smallcaps

Text in all small capitals.

Subscript

vertical-align : sub; font-size : smaller

Make the text smaller and raised above previous text

Superscript

vertical-align : super; font-size : smaller

Make the text smaller and lowered below previous text

Underline

text-decoration: underline

Text with an underscore beneath it

Why XAML doesn’t use CSS2 is a mystery. Perhaps that’ll change by the time the final Longhorn release is upon us. At least then we’d have all the alternatives for these CSS2 properties, not just a sprinkling of them. Of course, XAML has an extensible tag set to fall back on, so a great deal of further styling can be added if a need arises.

It’s easy to see how beginners using XAML styling might benefit from a tag?after all, that’s the way HTML got started, and using is still one of the charms of HTML for most beginners. But XAML ain’t HTML. Its focus on application GUIs means that XAML users are likely to be a bit more competent than HTML beginners. CSS provides a simple and flexible way to do styling, and CSS’s separation of style information from XML content makes XML documents really easy to work with. That’s worth a lot for most developers. At this stage, XAML’s styling tags look like tasty options that are probably too lightweight for real developers.

XAML, XUL, and XHTML Overlap
The greatest overlap between XAML and other standards lies in its support for concepts drawn from HTML/XHTML. The similarities between XAML and HTML are numerous. Overlap with HTML is not limited to XAML, of course. The other well-known XML GUI dialect?Mozilla’s XUL?also overlaps with XHTML. Finally, both XAML and XUL overlap in places that XHTML doesn’t even include. XHTML and XUL can be combined in one document (at least in Mozilla browsers). Such a combination is a rough analog for non-Web uses of XAML. In fact, Mozilla’s XUL alone is a rough analog for some uses of XAML.

Table 2 shows a number of XAML tags that closely match standard XHTML tags, as well as the equivalent XUL tags, when available.

Table 2. XAML tags that duplicate XHTML and XUL functionality.

XAML Tag

XHTML tag

XUL tag

Audio

embed, object

 

Block

div

 

Break

br

 

Button

button

button

Cell

cell

 

CheckBox

input type=”checkbox”

checkbox

Column

th

column listcol treecol

ComboBox

select

menupopup listbox

ComboBoxItem

option

menuitem listitem

Document

body

 

Footer

tfooter

 

Frame

frame, iframe

iframe

Header

theader

listheader treeheader

Heading

h1, h2, h3, h4, h5, h6

caption

HyperLink

a

 

Image

img

image

LineBreak

br

 

List

ul, ol

 

Listbox

select

listbox

ListElementItem

 

listcell treecell

ListItem

option

listitem treeitem

Menu

select

menu menulist

MenuItem

option

menuitem

Note

blockquote

 

Paragraph

p

description

RadioButton

input type=”radio”

radio

RadioButtonList

input type=”radio name=”?”

radiogroup

Section

section

description

Table

table

grid

Text

input type=”text”

textbox

TextBox

textbox

textbox multiline=”true”

Video

embed, object

 

Table 2 contains a bewildering array of tags, but taken together, they really constitute nothing more than support for most of the basic HTML content and form widgets that are already routine in ordinary Web applications. XUL overlaps XHTML less that XAML does because XUL attempts to separate itself from XHTML. It’s not trying to be a drop-in replacement, as XAML is.

One thing I do like about XAML compared with HTML is the increased freedom from the publishing-derived features of HTML. XAML frees you from h1 tags, code tags and a host of other miscellaneous niche tags used infrequently in HTML. For practical purposes, these tags act as little more than style information in modern HTML documents.

HTML is also a poor GUI for applications, despite the popularity of the Web. Both XAML and XUL go a long way towards rectifying that problem. You could re-write your Web applications in XAML and they’d look better than the HTML originals, if only XAML had better CSS support. There’s that CSS issue again.

XAML and XUL Windowing Features
You might wish that the lists stopped with Table 2, but alas, XAML has a heap of tags to consider.

Some features of XAML are designed for application windows, not for hypertext-laden multimedia documents. Such windows look like any Microsoft Windows or GNOME control panel or like any other forms-and-menu based application that you might find, whether it be WinZip or GnuCash. Such applications are also the problem domain that Mozilla’s XUL addresses, so it’s no surprise that in this area, a large number of XAML and XUL tags match up nicely. Table 3 shows these equivalences.

Table 3. XAML and XUL tag equivalents that describe extended widgets.

XAML Tag

XUL tag

Description

Application

Window

A whole application GUI expressed as XML

ContextMenu

Menupopup

floating menu that appears when context-clicking (right clickingon Windows)

DesignSurface

canvas, deck, stack

An area used for arbitrary placement of content

DockPanel

Box

A layout device subject to vertical and horizonal alignment instructions.

EmbeddedDialog

Dialog

A modal dialog box

GridPanel

Grid

2-dimensional set of cells much like a table.

HorizontalScrollBar

Scrollbar align=”horizontal”

A scrollbar used to scroll across content

NavigationWindow

opposite of the chrome specifier

An area decorated with standard Web browser navigation controls

ObjectDataSource

template datasources=

Specification of external data for dynamic display

Popup

menupopup

The bit of a context menu or drop down menu that appears whensummoned

QueryCommand

rule

A data query that supports dynamic content generation

RepeatButton

autorepeatbutton

A button that fires continuously

SimpleText

Text

Text that truncates when space is short

TextPanel

Editor

An area used to edit and format text

ToolTip

Tooltip

A textual hint that hovers over a widget

VerticalScrollBar

scrollbar align=”vertical”

A scrollbar used to scroll up or down through content

Window

Window

The GUI equivalent of HTML’s body tag.

WindowNavigationContainer

Browser

A tag that allows page-oriented navigation of its content

XmlDataSource

template datasources=

Specification of external data for dynamic display

Table 3 shows that both XAML and XUL provide a large list of additional (beyond HTML) GUI widgets to choose from, plus some support for record management applications through the use of data-driven GUI elements. XAML is pretty powerful in that area, and will no doubt challenge Mozilla’s sophisticated but unusual template system once there’s proper SQL support in Longhorn.

The irony of these widget-oriented tags is that XUL does to Microsoft and XAML what Microsoft does to everybody else. XUL contains just about all of the popular and frequently used widgets that people need, but without the underlying complexity of .NET. The heavy lifting underneath XAML’s widgets is probably overkill for a wide range of applications?particularly the record management applications that are the heartbeat of most large organizations. To developers building those applications, XAML’s highly integrated widgets are a risky bet on high-end media-rich GUI applications of the future. Just how much of the application market that is, only many years will tell. Personally, I don’t need a rotating terminal window.

XAML and SVG Overlap
In addition to hypertext and GUI widgets, XAML supports two-dimensional graphics. The equivalent W3C standard is SVG. Table 4 shows the XAML tags that have SVG equivalents.

Table 4. XAML tags that duplicate SVG functionality.

XAML Tag

SVG tag

Description

Canvas

Svg

A drawing area

Ellipse

Ellipse circle

A mathematical ellipse

Glyph

Glyph

One or more textual characters

Line

Line

A straight line

Path

Path

A pathway across a drawing area that delimits where other contentshould be applied

Polygon

Polygon

A mathematical polygon that is closed

Polyline

Polyline

A mathematical polygon that is open

Rectangle

Rect

A rectangle or square, possibly with corner modifications.

TransformDecorator

transform= attribute

A mathematical operation that rotates, scales, shears or relocatesa shape.

In line with Microsoft’s tendency to put the most popular features of a given technology to the front and center, this list of tags extracts from the SVG standard the most obvious graphical elements you might want in a given diagram.

Of all the W3C standards, SVG is probably the one most suitable for generation via point-and-click design tools, rather than hand-coded XML tags. It’s encouraging to see that XAML supports simple hand coding, using simple tags, as some of us never want to let go of that. At the same time, there’s no way the current features are enough to support a point-and-click two-dimensional design tool, at least not one of any consequence. That’s OK, XAML’s still in its very early days. Oh, SVG supports CSS styling too. There’s that pesky CSS issue again.

XAML’s Unique Tags
Finally, XAML has a few miscellaneous tags that defy any large category. These tags expose unique features that make XAML stand out as a separate technology (see Table 5).

Table 5. Unique XAML tags.

XAML Tag

Web equivalent

Tag use

ArrayListDataCollection

JavaScript DOM 0 collection such as document.forms

Provide programmer access to sets of tags.

Bind

Mozilla’s XBL system based on the CSS moz-binding extension.

Attach programmer logic or further GUI elements to a tag.

CollectionContainer

none

Hold a set of related tags.

Document

The DOM 0 window.document object.

Represent the XML document.

FillPanel

none

Unused

FixedPage

CSS2 fixed sizing and positioning.

Override default layout for the page content.

FixedPanel

CSS2 fixed sizing and positioning

Override default layout for sub-content of the page.

HorizontalSlider VerticalSlider

XForms range tag.

Provides a widget used to select a value from a range.

HwndHost

plugins

Embed a Win32 application in a tag.

ItemsControl

none

Base class for lists and trees.

NavigationApplication

JavaScript’s window.navigator object.

Provide context and control for moving within a multi-page application.

PageFunction

none

Control page display.

PageViewer

none

Print preview viewer for paged media.

Pane

Approximately a JavaScript window.modify()

Modifiable area within a document.

Panel

Similar to XUL deck or stack content.

Abstract base class.

In this table, the uses specified for given tags provide only broad hints as to their uses, but some of these miscellaneous tags are quite powerful and their implications go far beyond a simple one sentence description.

All of these tags can be mimicked using existing Web technology, or at least using various Mozilla XUL-specific techniques, except for the mighty HwndHost tag. That tag allows legacy Windows applications to run and display inside a XAML document. Such a feature on the Web requires a sophisticated mega-plugin or a guru-level ActiveX object to say the least.

It’s the brevity and direct expression of these odds and ends that really delivers value in the XAML environment. The development time saved by taking a straight path using a single XAML tag is significant. Very few people want to build a GUI framework on top of HTML?that’s both time consuming and potentially buggy. Nevertheless, it’s been done several times. It’s these tags that impress the most about XAML, and show its breadth. Mozilla’s XUL could take a lesson or too from XAML about tag definitions missing from its XUL toolkit.

XAML Integration Advantages
A tag-by-tag comparison of XAML with other XML standards is just a beginning. For simple uses, and even for some intermediate ones, such a comparison might be all you need. For more complex uses, though, there’s a lot more to the comparison of XML GUI dialects. In the bigger picture, Microsoft’s Avalon display system integrates the XAML tags together far more tightly than any other XML display system so far. This is most obvious in the SVG-like two-dimensional effects that XAML can apply to XUL-like widgets and to XHTML-like content. Although Mozilla allows deep integration between SVG, CSS, XHTML, and XUL, it doesn’t yet go as far as XAML in applying the processing tricks of one standard to all the tags of all the others. Then again, XAML’s support for CSS, by comparison, is nonexistent. The unifying approach that CSS brings to various W3C standards is sorely missed in XAML by this writer. If XAML presented a substitute styling system that was as integrated as CSS, then XAML would be another matter?at least then we could have a proper technology shoot-out.

Examined superficially, XAML tags have many of the features of traditional Web standards like HTML, as well as those of newer Web approaches like Mozilla’s XUL. Alas, it lacks proper CSS stylesheet support. Examined more deeply, however, XAML tags reuse, reinvent, and renew many standard idioms from the software development world in a highly integrated way.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may