- Preparing Your Machine
- Creating a New Project
- Designing with Blend
- Adding Code
- Working with the Phone
- Where Are We?
This chapter is from the book
This chapter is from the book
This chapter is from the book
Designing with Blend
As noted earlier, in addition to offering an Express version of Visual Studio the Windows Phone SDK 7.1 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 2.12.
){kind=link}
)
Figure 2.12 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.13. You should save your project before going to Blend to make sure Blend loads any changes (Ctrl-Shift-S).
){kind=link}
)
Figure 2.13 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. Some tasks are just simpler and faster to do in Blend. Chapter 5, Designing for the Phone, covers what tasks are better suited to Expression Blend.
Like Visual Studio, Blend consists of a number of panes that you will need to get familiar with.
The first pane (labeled #1 in Figure 2.13) 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 2.14) select the "hello world" text in the designer.
)
Figure 2.14 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 2.15).
){kind=link}
)
Figure 2.15 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 2.16.
){kind=link}
)
Figure 2.16 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 2.17). Select the tool and draw a rectangle in the ContentPanel to create a new rectangle (also shown in Figure 2.17). If you then select the top arrow tool (or press the V key) you'll be able to modify the rectangle.
){kind=link}
)
Figure 2.17 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 2.18.
)
Figure 2.18 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 2.19.
)
Figure 2.19 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 2.20.
)
Figure 2.20 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 2.21). 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 2.21.
){kind=link}
)
Figure 2.21 Inserting a TextBlock
Once the new TextBlock is inserted, you can simply type to add some text. Type in "Status" just to have a placeholder for some text we will place later in this chapter. 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 2.22. 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 2.22 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 2.23.
){kind=link}
)
Figure 2.23 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.