here’s two things that most developers are (or should be) excited about in the upcoming Vista version of Windows (formerly codenamed Longhorn), and one of them is Avalon. Avalon is the code name for the presentation subsystem class libraries in WinFX, which is the new application programming interface (API) in Vista/Longhorn. Avalon consists of a display engine and a managed-code framework. Using Avalon, you can build high-fidelity Longhorn applications, blending together application UI, documents, and media content.
While Vista is still about a year away from release (expected to ship in late 2006), Microsoft has recently made a version of the Avalon and Indigo (the other exciting feature of Longhorn for developers) available to the general public in a Beta1 “RC.” Anyone who is interested in testing out Avalon and Indigo features on Windows XP can download this RC beta and get a jumpstart on learning the great features Avalon and Indigo will offer.
This is the first of a three-part series in which I will introduce you to some of the development opportunities in Avalon. In this first article I will introduce you to the basics of Avalon, the different types of Avalon applications, and XAML (Extensible Application Markup Language), the user interface markup language you use to build Avalon applications.
To try out Avalon on Windows XP, you need the following:
- Microsoft Pre-Release Software, “Avalon” and “Indigo,” Beta1 RC?http://www.microsoft.com/downloads/details.aspx?familyid=b789bc8d-4f25-4823-b6aa-c5edf432d0c1&displaylang=en
- The WinFX SDK?http://download.microsoft.com/download/5/4/0/5407D6E4-740E-413E-8E91-EF7AC53A478A/en_winfx_sdk_beta1_RC.iso
- Microsoft Visual Studio 2005
The easiest way to compile and run an Avalon application is to use Visual Studio 2005, currently in Beta 2. (You can use the included MSBuild utility in the WinFX SDK to manually compile an Avalon application, but that would be tedious and is not recommended.)
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:
This is a text block This is a textbox
When you’ve done that, you should see the UI rendered by XAMLPad (see Figure 1).
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.”
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.
Types of Avalon Applications
So far I have been using the XAMLPad to build the UI. However, a real application needs business logic to function. So I will now use Visual Studio 2005 (Beta 2 at the moment of writing) to build a functional Avalon application.
Using Visual Studio 2005 Beta 2, create a new project by going to File -> New Project? The New Project window will appear (see Figure 5).
- Avalon Application?works just like conventional Windows application;
- Avalon Express Application?hosted within Internet Explorer;
- Avalon Control Library?Avalon controls to be hosted within another Avalon application;
- Avalon Navigation Application?works like a Windows application except that it navigates between “pages” rather than opening new windows.
I will show you an example of three out of four of these project types. I’ll save the Avalon Control Library type for a future article, as it is far more involved than the others.
First, select the Avalon Application template and click OK. You will see the default Window1.xaml window and the Solution Explorer as shown in Figure 6.
Note that the root element for an Avalon Application project type is Window. Besides the StackPanel and DockPanel that I discussed in the last section, you can also use the Grid element to position controls within the window. The Window1.xaml.vb is the code-behind for the page and this is the place where you write your code for the application. The x:Class attribute within the Window element specifies the name of the class. During compilation stage this page is compiled into a partial class and combined with the code-behind (Window1.xaml.vb) to form a complete application.
' Event handler for a Button with a Name of Button1Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs)End Sub
For this example, simply display a “Hello World!” message to see that the event handler really works. I’ll go over this feature in more detail in a future article.
' Event handler for a Button with a Name of Button1Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs) ' Add this MsgBox("Hello World!")End Sub
That’s it! Press F5 to run the application now. You will see the application window and when you click on the OK button, you will see a message box (see Figure 8).
Now, try clicking on the “Page 2” link on the window. Nothing happens. This is because the Avalon Application project type does not support navigation. Instead you need to open a new window just like a conventional Windows application.
Stop the debugging and add a new Avalon window to the application (right-click on the project name in Solution Explorer and select Add -> New Item?). Select the Avalon Window template and click Add (see Figure 9).
Change the ButtonClick event as follows:
Private Sub ButtonClick(ByVal sender As Object, _ ByVal e As RoutedEventArgs) Dim win2 As New Window2 win2.Show()End Sub
Press F5 to debug the application and click on the OK button again. You will see that the new window now appears (see Figure 11; windows have been resized for presentation purpose).
For Avalon Express, the application will be hosted within Internet Explorer. Using Visual Studio 2005, create a new Avalon Express Application by choosing the Avalon Express Application template.
By default, Page1.xaml page will be created (see Figure 12).
Notice that the root element for the XAML page is now Page, rather than Window. Again, replace the Grid element with the content of Listing 1. Also, add a new page to the project by right-clicking on the project name in Solution Explorer and then selecting Add -> New Item?. In the Add New Item dialog window, select Avalon Page (see Figure 13) and use the default name of Page2.xaml. Click Add.
One interesting feature of this project type is that if you use the MsgBox() function to display a message box (as I did earlier with the OK button), it will still work.
Notice the Navigational buttons on the top of the application (see Figure 15). These two buttons allows you to navigate between pages, just like browsing Web pages.
Avalon Navigation Application
The third type of Avalon application, which is also likely to be the most common type of Avalon app, is the Avalon Navigation Application. Using Visual Studio 2005, create a new Avalon Navigation Application by choosing the Avalon Navigation Application template.
Like the Avalon Express application, the Page1.xaml page is created by default. As usual, replace the Grid element with the content of Listing 1. Also, add a new page to the project by right-clicking on the project name in Solution Explorer and then selecting Add -> New Item?. In the Add New Item dialog window, select Avalon Page and use the default name of Page2.xaml. Click Add.
Press F5 to debug the application. Instead of hosting the application within IE, it now has its own window looking much like IE (see Figure 16).
Clicking on the Page 2 link will load Page2.xaml. To return to the previous page, click on the Back navigation button.
Like the Avalon Express application project type, all navigation in an Avalon Navigation Application will take place within the window itself; no new windows will be created.
In this article, you have seen the basics of Avalon and how XAML has played a role in creating the UI of an Avalon application. You have also seen the different Avalon project types and their differences. However, this has been the tip of the iceberg. In the next article, I will walk you through the navigational structure of Avalon applications and discuss how to move from one page to another. In another article, I will show you how data-binding is done in Avalon. So, stay tuned for the next article!