XAML, the Vista Markup Language
In Avalon, you build the UI of your application using the XAML markup language. Using XAML to build your UI is similar to building an HTML page. You use markups to render the controls you want to display on your page. Unlike HTML, XAML is based on XML, so you need to ensure that your XAML page adheres strictly to the rules of XML, i.e. element and attribute names must be case-sensitive and attribute values must be properly quoted, etc.
Every element in a XAML page is mapped to a class and attributes mapped to a property. When a XAML application is compiled, the UI is converted into object-model code and combined with code-behinds (if any) using partial classes. Hence, besides using XAML to generate the UI, you can also programmatically create the UI using code. I will introduce you to the use of code-behinds later in this article.
The current WinFX SDK does not support any visual editor for creating XAML UIs, but Microsoft will undoubtedly ship one in the near future. Until then, you need to code your XAML page by hand. The WinFX SDK comes with the XAMLPad editor that allows you to quickly build and test user interfaces created using XAML.
To launch XAMLPad, go to Start->Program->Microsoft WinFX SDK -> Tools -> XAMLPad.
The XAMLPad editor window is divided into two panes: You enter the XAML code in the bottom pane and the top pane will render the UI in real time based on the XAML code you entered. The XAMLPad is easy to use and requires no explicit compilation on your part. Now I'll walk you through a few simple exercises designed to demonstrate the various types of applications Avalon can build.
To get started with the sample application, enter the following code into the XAMLPad:
<Button Name="Button1" Width="100"
Margin="10,10,10,5">This is a button</Button>
Margin="10,5,10,5">This is a text block</TextBlock>
<TextBox Name="Button1" Width="200"
Margin="10,5,10,5">This is a textbox</TextBox>
When you've done that, you should see the UI rendered by XAMLPad (see Figure 1
Figure 1. The UI rendered XAMLPad: The top frame in XAMLPad renders the code entered in the bottom frame in real time.
Figure 2. Aligning the controls horizontally: By setting the Orientation property in the StackPanel element to Horizontal, you can change the default, vertical orientation of the controls.
Should there be any errors with the XAML code, the code will be displayed in red and the error message printed at the bottom of the screen.
Now I'll examine the code that you just entered in detail. First, the StackPanel element handles the layout of the page and acts as a container for other controls, such as Button and TextBox. The StackPanel control arranges the control contained within it in a single line, either horizontally or vertically. By default, the alignment is vertical, that is, controls are stacked on top of one another as you can see in Figure 1. To arrange the controls horizontally, simply set the Orientation property in the StackPanel element to "Horizontal" (see Figure 2).
The Button element displays a button control on the page. By default, the button control will be just wide enough to accommodate whatever text you've set in it (using the text content of this element). However, you can manually adjust the width of the button control by setting the Width attribute. You can justify the positioning of the button element through the HorizontalAlignment attribute. The Margin attribute puts an invisible wrapper around the control so that other controls are guaranteed to be a minimum distance away from other controls, and thus avoids accidental "bumping" of controls (see Figure 3). The values of the Margin attribute are set in this order"left, top, right, bottom."
Figure 3. The use of the Margin attribute: This button control is surrounded by a "margin" that prevents other controls from being placed too closely.
Figure 4. A More Advanced UI in XAMLPad: This time around, I've given XAMLPad a few more complex controls to render.
The TextBlock element displays a label on the page (flat text that cannot be selected or changed) and the TextBox control displays a textbox on the page (user modifiable text).
More complex UI
Now I want to consider a relatively more complex UI that you can build using XAML. Copy and paste the code from Listing 1 into XAMLPad. Figure 4 shows the UI displayed by XAMLPad for Listing 1.
Note the following characteristics of this code:
- Besides using the StackPanel element, you can also use the DockPanel element to group elements and other panels such as StackPanel and even DockPanel elements. Using the DockPanel.Dock attribute, you can enable elements to be "docked" at a certain position (such as "Top", "Left, "Right", or "Bottom") within the DockPanel element.
- You can create commonly used controls such as combo box, list box, check box, and radio button list using the ComboBox, ListBox, Checkbox, and RadioButtonList elements, respectively.
- Besides setting the background of an element with a color, you can also set it to gradient fill using values such as "VerticalGradient Lavender Yellow."
- You can navigate to another page using the HyperLink element. However this element will only work in certain types of Avalon applications. You can learn more about this in the next section.