WinRT XAML for Serious Beginners – The XML in XAML

  • Article

What is XAML

XAML is XML with a letter ‘A’ in it. Let’s learn XML first before we can add that very important ‘A’.

It is important to note that XAML uses a feature of XML that many people are not familiar with: XML namespaces. Read on to see a very brief explanation of XML namespaces.

Let’s learn XML, then!

Here’s one of the infinite ways one could describe the first post from this series in XML (eXtensible Markup Language):

 <BlogPost Title="WinRT XAML for Serious Beginners – Intro"
          Author="David Nissimoff">
    <Section Header="">
        Hello everyone! (...)
    </Section>
    <Section Header="Why even consider learning XAML?">
        (...)
    </Section>
    (...)
    <Ratings AllowAnnonymous="true"></Ratings><!--no ratings yet-->
</BlogPost>

Looking closely, you’ll see the snippet above has that article’s text in it, but there’s also some other stuff between ‘<’, ‘>’ characters. These are XML tags. There’s the opening tag <BlogPost> and the matching closing tag </BlogPost>. Note also how the blog post contains sections, indicated by opening tags <Section> and closing tags </Section>. Opening tags can also have attributes, so a generic opening tag could be <SomeTagName SomeAttribute1="Attribute value" SomeAttribute2="Other value">.

It is worth pointing out how the <Ratings> element doesn’t have any content (the closing tag immediately follows the opening tag). If you don’t have anything to put between the opening and closing tag, you can save some typing by using the shorter, self-closing notation <Ratings AllowAnnonymous="true"/>. There are no other semantic differences and the latter is shorter, and hence usually preferred whenever possible.

You might also have noticed that this snippet had a comment in it: <!--no ratings yet-->. Comments start with “<!--" and end with “-->”. An empty comment could be written as “<!---->”

Fancy XML – Namespaces

Now that you know about XML tags, the previous XML snippet describing this blog post should be easily understandable and its structure very clean. However, the only reason why you actually know what that snippet is describing, is because you’re referring to some common knowledge and assuming that <BlogPost> refers to a blog post, that <Section> refers to a text section within the blog post, etc.

Note, however, that <Section> could mean other things in different contexts. If I’d been describing an orchestra (stay with me!) – in this case the orchestra has a brass section and a string section – then the following XML might be reasonable:

 <Orchestra Name="My Nameless Orchestra">
    <Section Type="Brass" />
    <Section Type="String" />
</Orchestra>

Now we have a problem: <Section> means two completely different things in these contexts, and computers don’t like ambiguity (which is a good thing – we sure don’t want a section of this blog post ending up in an orchestra!). So let’s be more explicit about what we mean.

 <BlogPost xmlns="blog post common knowledge"
          Title="XAML for Serious Beginners"
          Author="David Nissimoff">
    <Section Header="">
        Hello everyone! (...)
    </Section>
    <Section Header="Why even consider learning XAML?">
        (...)
    </Section>
    (...)
    <Ratings AllowAnnonymous="true"></Ratings><!--no ratings yet-->
</BlogPost>

The important part here is the attribute xmlns (XML NameSpace declaration). The value of this attribute can be any string – XML does very little to enforce any format. It is customary, however, to use strings that look like web URI’s, which don’t even have to exist! XAML uses this by default: xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation". Try going there with a browser, and you’ll see it is NOT a valid link – and this is totally fine.

You can also define more namespaces in one XML document, by using prefixes. Consider a blog post about XAML for orchestra members:

 <BlogPost xlmns="blog post common knowledge"
          xmlns:orch="orchestra common knowledge"
          Title="XAML for Orchestra members"
          Author="Not Me">
    <Section Header="Introduction">
        This is some text in the blog post.
    </Section>
    <orch:Orchestra Name="My Nameless Orchestra">
        <orch:Section Type="Brass" />
        <orch:Section Type="String" />
    </orch:Orchestra>
</BlogPost>

Let’s see what just happened:

  • The <BlogPost> element defined the default namespace: “blog post common knowledge”. It is also defining a “xmlns:orch” namespace as “orchestra common knowledge”. Now that it is defined, this orch: namespace could be used in any of this tag’s children (it could also be used for the current tag!).
  • The BlogPost has a text section with header “Introduction”.
  • The blog post also has an orchestra (“orch:Orchestra”) which has a brass section and a string section.
  • There is no more ambiguity!

So what *is* XAML?

Now that we know the basics of XML, let’s move on to the ‘A’ in XAML: eXtensible Application Markup Language.

XAML is a declarative language that uses XML to describe how to initialize a set of objects. “Initializing a set of objects” is something that can be easily achieved with programming languages (such as C# or VB.NET) by calling class constructors and setting the desired properties. Indeed, almost everything you do with XAML can also be done in code. However, XAML offers a few significant advantages that will become clearer as we go:

  • Allows for cleaner / more maintainable code (because the UI design can be kept separate from code-behind)
  • Requires much less typing that the equivalent C# code (it is more concise)
  • Has very rich tooling support in Visual Studio: IntelliSense, code generation, F12 Go to Definition, etc.
  • Supports Templating. I’ll discuss Templates and how to use them in a later post – suffice to say that there is a way to define a chunk of XAML as a template, and that template can be used multiple times in many places as if it was copied each time. Think of a Button control. There is a template that defines what it looks like, and then adding a button to a page will end up invoking the button Template. This is immensely useful for multiple scenarios, and one of XAML core strengths.

Other online resources

Wrapping up

This was meant as a jumpstart post into XML and the main XML features which are used extensively with XAML, and I hope it is useful at that. If you have any suggestions or feedback, please leave your comments below and I’ll do my best to address them in a timely manner.