To offering an
Express version of Visual Studio the Windows Phone SDK includes an
Express version of Expression Blend specifically for use in developing
phone applications. You can launch Blend by looking for the shortcut
key, or you can open it directly with Visual Studio. If you right-click
on the MainPage.xaml file you will get a context menu like the one shown
in Figure 1.
Figure 1. Opening Blend directly in Visual Studio
When you select Open in Expression Blend, Blend will open the same
solution in the Expression Blend tool with the selected XAML file in the
editor, as shown in Figure 2. You should save your project before going to Blend to make sure Blend loads any changes (Ctrl-Shift-S).
Figure 2. The Blend user interface
Although Expression Blend is thought of as purely a design tool,
designers and developers alike can learn to become comfortable with it.
And although Visual Studio and Expression Blend share some of the same
features, both developers and designs will want to use Blend to build
their designs.
Like Visual Studio, Blend consists of a number of panes that you will need to get familiar with.
Note
Blend and Visual Studio both open entire solutions, not just files. This is a significant difference from typical design tools.
The first pane (labeled #1 in Figure 2)
contains multiple tabs that give you access to several types of
functionality. By default, the first tab (and the one in the foreground)
is the Projects tab (though you could be showing a different tab by
default). This tab shows the entire solution of projects. The format of
this tab should look familiar; it’s showing the same information as the
Solution Explorer in Visual Studio. The next pane (#2) is the editor
pane. This pane contains tabs for each opened file (only one at this
point). MainPage.xaml should be the file currently shown in the editor.
Note that the editor shows the page in the context of the phone so that
you can better visualize the experience on the phone. On the right-hand
side of the Blend interface is another set of tabs (#3) that contain
information about selected items in the design surface. The selected tab
should be the Properties tab. This tab is similar to the Properties
window in Visual Studio but is decidedly more designer-friendly. As you
select items on the design surface, you’ll be able to edit them in the
Properties tab here. Finally, the Objects and Timeline pane (#4) shows
the structure of your XAML as a hierarchy.
Let’s make some changes with Blend. First (as shown in Figure 3) select the “hello world” text in the designer.
Figure 3. Selecting an object in Blend
Once it’s selected, you can see that eight squares surround the
selection. These are the handles with which you can change the size or
location of the TextBlock. While this object is selected,
the Objects and Timeline pane shows the item selected in the hierarchy;
as well, the item is shown in the Properties tab so that you can edit
individual properties (as shown in Figure 4).
Figure 4. Selecting an object to edit in the Properties pane
If you type “text” into the search bar of the Properties pane, the
properties that have that substring in them will appear (to temporarily
reduce the number of properties in the Properties pane). You can change
the title by changing the Text property, as shown in Figure 5.
Figure 5. Updating a property in Blend
Once you’re done changing the text, you may want to click the “X” in
the Search bar to clear the search criteria. This will remove the search
and show all the properties of the TextBlock again.
Selecting items and changing properties seems similar to what you can
do in Visual Studio, but that’s just where the design can start. Let’s
draw something. Start by selecting a container for the new drawing. In
the Objects and Timeline pane, choose the ContentPanel
item. This will show you that it is a container that occupies most of
the space below our “hello world” text on the phone’s surface.
We can draw a rectangle in that container by using the left-hand
toolbar. On the toolbar you’ll see a rectangle tool (as shown in Figure 6). Select the tool and draw a rectangle in the ContentPanel to create a new rectangle (also shown in Figure 6). If you then select the top arrow tool (or press the V key) you’ll be able to modify the rectangle.
Figure 6. Drawing in a container
The rectangle you created has eight control points (the small squares
at the corners and in the middle of each side). In addition, the
rectangle has two small control points in the upper-left side (outside
the surface area of the rectangle). These controls are used to round the
corners of rectangles. Grab the top one with your mouse and change the
corners to be rounded slightly, as shown in Figure 7.
Figure 7. Rounding the corners
Now that you have rounded the corners you can use the Properties pane
to change the colors of the rectangle. In the Properties pane is a
Brushes section showing how the different brushes for the rectangle are
painted. The rectangle contains two brushes: a fill brush and a stroke
brush. Selecting one of these brushes will allow you to use the lower
part of the brush editor to change the look of that brush. Below the
selection of brush names is a set of tabs for the different brush types,
as shown in Figure 8.
Figure 8. Editing brushes
The first four tabs indicate different options for brushes. These
include no brush, solid color brush, gradient brush, and tile brush.
Select the stroke brush, and then select the first tab to remove the
stroke brush from the new rectangle. Now select the fill brush, and
change the color of the brush by selecting a color within the editor, as
shown in Figure 9.
Figure 9. Picking a color
Now let’s put some text in the middle of our design to show some data. More specifically, let’s put a TextBlock on our design. Go back to the toolbar and double-click the TextBlock tool (as shown in Figure 10).
Although we drew our rectangle, another option is to double-click the
toolbar, which will insert the selected item into the current container
(in this case, the ContentPanel). The inserted TextBlock is placed in the upper left of our ContentPanel, as also shown in Figure 10.
Figure 10. Inserting a TextBlock
Once the new TextBlock is inserted, you can simply type
to add some text. You should use the mouse to
click on the Selection tool (the top arrow on the toolbar) so that you
can edit the new TextBlock. You could use the mouse to place the TextBlock
exactly where you like, but you could also use the Properties pane to
align it. In the Properties pane, find the Layout section and select the
horizontal center alignment and vertical bottom alignment, as shown in Figure 11.
You might need to set your margins to zero as well to achieve the
effect (as Blend may put a margin on your item depending on how you draw
it).
Figure 11. Centering the TextBlock
Next you can edit the font and size of the TextBlock
using the Text section of the Properties pane. You will likely need to
scroll down to reach the Text section. From there you can change the
font, font size, and text decoration (e.g., bold, italic, etc.). Change
the font size to 36 points and make the font bold, as shown in Figure 12.
Figure 12. Changing the text properties
At this point our application does not do much, but hopefully you
have gotten your first taste of the basics of using Blend for design. To
get our first application to do something, we will want to hook up some
of the elements with code. So we should close Blend and head back to
Visual Studio.
When you exit Blend you will be prompted to save the project. Upon
returning to Visual Studio your changes will be noticed by Visual
Studio; allow Visual Studio to reload the changes.
