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 <Bold> tag—after all, that's the way HTML got started, and using <B> 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 clicking on 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 when summoned
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 content should 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 relocates a 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.