More Resources MSDN: Microsoft Visual Studio 2008     Downloads Free Trial: Microsoft Expression Blend 2

Building the User Interface Using XAML
As mentioned earlier, Visual Studio 2008 has IntelliSense support for XAML content. While this will make the UI building process much more efficient, unfortunately this preview version of Visual Studio 2008 does not have a viewer for XAML content. That means that every time you code some XAML content, you have to run it in order to see if the look and feel is what you wanted.

The good news is that you can use another tool from Microsoft—Expression Blend—to build the XAML UIs. Microsoft Expression Blend is a professional design tool that allows you to build professional looking UI for Windows application. The latest edition of Blend, Expression Blend 2 March Preview, allows you to create Silverlight-based applications (you can obtain a preview copy from the links provided earlier in the article).

To open the Page.xaml file with Expression Blend 2, right-click on it and select Open in Expression Blend… (see Figure 4).

Figure 4. Open Page.xml: Opening a XAML page using Expression Blend.

Figure 5. Edit Page.xml: Editing the XAML file using Expression Blend 2.

Expression Blend 2 will launch and you will see an environment somewhat similar to Visual Studio 2008 (see Figure 5).

Let's now add some controls to the page. First, you'll create a rounded-corner button on the page that looks like Figure 6). Within this button, you'll also add a text block so that you can use it to display some information.

Figure 6. Adding Controls: The rounded-corner button you will create.

Figure 7. Adding Controls: Adding a canvas to the page.

First, click on the Canvas control (see Figure 7) and add it to the page. This canvas will act as a container that contains all the controls that make up the button.

To create a border for the button, add a Rectangle control to the page, essentially covering the canvas that you have just added (see Figure 8).

To create the four rounded corners, click on the Direction Selection icon and then select the Rectangle control that you have just added (see Figure 9). Set the properties of the Rectangle control as follows:

• RadiusX - 8
• RadiusY - 8
• StrokeThickness - 3

In addition, you will also set the background color of the rectangle to yellow (see Figure 9 for the exact color).

Figure 8. Adding Controls: Adding a Rectangle to the canvas.

Figure 9. Adding Controls: Making the four round corners and setting its background color to yellow.

To display text within the button, you need to add a TextBlock control onto the canvas (see Figure 10). Also, set the font to Comic Sans MS.

To make the button display the current time, you need to update the time every second. To do so, add a Timeline to your XAML file. First, click on the > arrow in the Objects and Timeline group, followed by the + button (see Figure 11).

Figure 10. Adding Controls: Adding a TextBlock control to the canvas.

Figure 11. Adding Controls: Adding a Timeline to the XAML file.

You will be asked to name the new Timeline. Use the default name of Timeline1 and click OK.

Your XAML file will now look like Figure 12. Save the XAML file.

When you now return to Visual Studio 2008, it will ask you if you want to reload the Page.xaml file as it has been edited outside the source editor. Once you have reloaded the file, you will now see the following XAML content (see Listing 5).

Figure 12. The XAML File: Your XAML file in Expression Blend 2 March Preview.

Figure 13. The Views: Switching between Design and XAML views in Expression Blend.

To make the canvas object accessible programmatically, add the x:Name attribute and set it to btnTime, like this:

<Canvas x:Name="btnTime" Width="189" Height="44"
Canvas.Left="8" Canvas.Top="8">

Note that in Expression Blend 2, you can switch between Design and XAML views (see Figure 13). Unfortunately, there is no IntelliSense support in XAML view.