devxlogo

Be an Avalon Test Pilot and Build the Windows UIs of Tomorrow

Be an Avalon Test Pilot and Build the Windows UIs of Tomorrow

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.

Getting Started
To try out Avalon on Windows XP, you need the following:

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).


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.

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).


Figure 5. The New Project template: Visual Studio offers you one of four different template types for Avalon.
?
Figure 6. An Avalon Application Project: The screenshot shows the template created by Visual Studio for the Avalon Application template.

For this article, I will use Visual Basic as the language and so under the Visual Basic item, select Avalon and you should see the four primary types of Avalon project templates:
  • 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.

Avalon Application
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.

Copy the code shown in Listing 1 and replace the Grid element in the Window1.xaml file. In the Button element, add the Click attribute and set its value as shown in Figure 7.


Figure 7. Setting the Click: Add an event to the Button element.
?
Figure 8. Testing the application. Your first Avalon application at work.

Essentially, you are creating an event handler for the button control. When the button is clicked, the ButtonClick event will handle the event. To service this event, double-click on Window1.xaml.vb in Solution Explorer. You should see two sample events that are commented out. Uncomment the ButtonClick event and remove the Handles clause at the end of the event handler. The ButtonClick event should now look like this:
' 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).


Figure 9. Putting in a Window: The screenshot shows how to add a new Avalon Window to the project.
?
Figure 10. Two Windows: The files in the project are shown. There is one set of Window.xaml files for each window in the application.

Your project now has two windows (see Figure 10)?Window1.xaml and Window2.xaml.

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).


Figure 11. Next Window: Clicking on the button now opens a new window.
?
Figure 12. Avalon Express: The template created by Visual Studio for the Avalon Express Application template is shown.

Avalon Express Application
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.


Figure 13. Avalon Page: Select Avalon Page from the Add New Item dialog to add a new Avalon page to the project.
?
Figure 14. In IE: The screenshot shows the application again, this time hosted within Internet Explorer.

Press F5 to debug the application. Internet Explorer will load and the application should look like Figure 14.

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.


Figure 15. The Navigational buttons: Avalon builds traditional browser-style animation for you in the Express project type.
?
Figure 16. Running the application: Here’s the final application in action.

To see how page navigation works, click on the Page 2 hyperlink, which will, not surprisingly, load Page2.xaml. For Avalon Express application project type, all navigation will happen with the browser; no new windows will be created. You can go back to the previous page (Page1.xaml) by clicking on the Back navigation button from Page2.xaml.

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!

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist