Expression Blend for Developers

Summary

Building Silverlight applications just got a lot easier.

A Note on This Tutorial. The history of the material for this tutorial is that Scott Guthrie wrote a terrific introduction to this material at the end of February, which he gave me permission to turn into a series of videos, currently (or soon to be) available on Silverlight.NET. This tutorial completes the circle by building on the videos and integrating the material into the Silverlight Tutorial series.

The project we're setting out to build is very similar to the Silverlight chat service built by ScottGu, and is shown in Figure 5-1

Figure 5-1. Completed Application (Click to view full-size image)

Getting Started

The best way to get started is by opening Expression Blend.
The first thing you'll see is the New Project window. Choose Silverlight Application, set your language to Visual Basic and choose a location for your new project, which we'll name BlendForSilverlight, as shown in Figure 5-2

Figure 5-2. Creating the New Project (Click to view full-size image)

The Solution Files

Take a look in the upper right hand corner. The solution, project and other files created by Blend are identical to the files created by Visual Studio 2008. In fact; there is no exporting/importing between the two; you can open both development environments on the same files simultaneously and they will both work perfectly (see Figure 5-3)

Figure 5-3. Blend Files

A Very Quick Tour

The upper right hand corner not only contains the files, but also contains the properties window, the resources window and, below these, the data window. The central area has the "Art Board" (the design surface" and the Xaml (markup) which can be split as shown in Figure 5-4

Figure 5-4. Design Surface in Split Mode (Click to view full-size image)
I've added highlighting in the upper right hand corner to point out the controls that allow you to switch among design, Xaml and split mode.
The upper left hand corner contains the Interaction panel and the toolbar. Many of the tools in the tool bar have a small mark in the lower right hand corner indicating that they can be expanded to find related tools. For example, expanding the grid tool displays all the layout controls as shown in Figure 5-5

Figure 5-5. Expanding the Grid Tool
The Chevron tool allows access to all the controls, including any user controls, custom controls or third party controls (be sure to click Show All) as shown in Figure 5-6

Figure 5-6. Chevron Expanded (Click to view full-size image)
Note that from within the Asset Library exposed by expanding the Chevron you can also search for the control you want, and by clicking on the details radio button you can determine which library a control is in.

Chat Application - First Steps

Begin by switching to design view, and then hold the control key and use the mouse wheel to zoom out so that you can see the entire grid.

If your mouse doesn't have a wheel, you can zoom by picking a value (or filling in an arbitrary value) at the bottom of the design window or by using the menu choices View®Zoom In and View®Zoom Out

You can move the surface by clicking on the hand and then using the mouse to click and drag or by using the scroll bars.
Take a look at the upper right hand corner of your grid, as shown in Figure 5-7

Figure 5-7. Upper left corner of the grid
Hovering over the upper left hand corner will tell you if you are in grid layout mode or Canvas layout mode. If you are in canvas layout, clicking will toggle you back to grid layout mode.
You can create rows and columns just by sliding along the margins and clicking where you want the rows and margins placed, as shown in Figure 5-8

Figure 5-8. Creating a Row using The Mouse
Immediately after I click, an open lock appears above and below my new row line. I'll add two lines, one for the top row and one for the bottom; thus implicitly creating a middle row, and thus three locks as shown in Figure 5-9.

Figure 5-9. Creating the bottom row (Click to view full-size image)
Note that immediately after the row is created, not only are the locks shown but the cursor changes shape to indicate that you can easily move, and thus resize the rows.
The open locks indicate that the rows will resize as the browser (inside of which your Silverlight application will run) is resized. We want the middle row to do so, but we want the top and bottom row to remain of fixed size, so click on the top and bottom lock, and then click on split view to examine the effects on the XAML, as shown in Figure 5-10.

Figure 5-10. Middle Row has Star Sizing
Note that (on line 10) the middle row definition has its Height property set to * (star) indicating that it will take up the remaining room after the other rows are allocated.

Creating the Columns

Let's create two columns, a smaller right column that has a fixed size and a larger floating size left column. Try this yourself without additional help.

Creating the Background Color

We'd like to give the entire application a light blue background, but to make it a bit more attractive, we'll use a linear gradient brush. To do this, please follow these numbered steps, reflected in Figure 5-11.

1. Click on the grid (Layout Root) in the Interaction Panel
2. Click on the properties panel and expose the Brushes subpanel. Click on the Background brush
3. Click on the Gradient Brush button
4. Add stops along the gradient by clicking and then
5. manipulating the color bar and
6. Moving the color dot for precise color choices

Figure 5-11. Adding a Linear Gradient By the Numbers (Click to view full-size image)

Adding A Send Buton

The next step is to add a button to the lower right hand corner. Click on a button on the toolbar, drag it to approximate size in the area and then click in the properties window.
Next, open the Layout subpanel and set the Width and Height to Auto and set a small value (e.g., 4) for the Margin, all around. This will fill the area, but with a reasonable margin from the edges of the column and row.

The value you put in a property box does not take effect until you leave that box (e.g., using tab)

There are a few things to notice about the Layout Panel (Figure 5-12)

Figure 5-12. Setting the Button Layout with the Layout Panel
First, you can set the Width and/or Height to auto by pressing the button to the right of the field. Second, when you set a specific (non-default) value next to a property, a white dot appears (there are 5 white dots in Figure 5-12).
Take a look at the Xaml once you have these values set,