Figure 1-5. The Objects and Timeline pane in Expression Blend
Go to the Properties pane and set the width and height of the UserControl to 400 and 100, respectively, as shown in Figure 1-6.
Figure 1-6. The size properties for a control in Expression Blend
You can also click XAML or Split along the right side of the design surface and view and edit the XAML directly. However, as interfaces get more complex, Blend becomes an invaluable design tool for working with the XAML indirectly. Hand-editing XAML should generally be used for tweaking some XAML instead of creating full-blown user interfaces.
Next, right-click LayoutRoot in the Objects and Timeline pane and select Delete. This removes the default Grid layout control. While you can go to the toolbox and select the Canvas control (it's in the group four controls up from the bottom), let's view the XAML and create a Canvas control by hand. Click Split alongside the design surface to see the design surface simultaneously with the XAML. Edit the XAML to look like the following (reintroducing the close tag to the UserControl and dropping in the Canvas tag):
<UserControl xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.Page" Width="400" Height="100"> <Canvas Height="Auto" Width="Auto" Background="White"/></UserControl>
Now go to the toolbox and select the TextBlock control, as shown in Figure 1-7.
Figure 1-7. Choosing the TextBlock control from the toolbox
This control is used to place text on a user interface, much like a label in Windows Forms or ASP.NET. Click the design surface and hold the mouse button down, and then drag right and down to create a rectangle describing the area for the TextBlock. Now the TextBlock should appear as a child of the Canvas in the Objects and Timeline pane. Make sure the TextBlock is selected, and go to Properties.
If you've read even just one other programming book, you know what's coming next. Scroll down the properties until you see the Common Properties area, and set the text to "Hello World!" as shown in Figure 1-8.
Figure 1-8. Setting the Text property of a TextBlock in Expression Blend
If you now switch back to Visual Studio, it will ask to reload Page.xaml. Go ahead and reload. Press F6 to build the application and then Ctrl+F5 to start the application without debugging. You should see something similar to Figure 1-9 in your browser.
Figure 1-9. The Hello World application as viewed in Internet Explorer 7
Congratulations, you have now created your first Silverlight application using both Expression Blend and Visual Studio!