The Windows Phone SDK includes a free version of Microsoft’s
Expression Blend tool for creating your Windows Phone application. You
should get comfortable with this tool because it is an important way to
design your applications. Blend has been around for a while for use with
WPF and Silverlight applications, so it has had time to mature before
the birth of Windows Phone.
Creating a Project
When starting a new application in Blend, you will be presented with a
dialog box that includes several project types, as shown in Figure 1.
Figure 1. Blend New Project dialog box
There are separate project types for different starting project
types. The first four of these project types are for creating new
Windows Phone applications, and the last one is for a library to hold
controls for other applications to use. Table 1 shows the various application projects.
Table 1. New Project Types in Blend
A Tour Around Blend
Creating a new application will generate a new project with a base
user interface on which you can start your design. This is usually the
starting point for designing with Blend. To begin, let’s look at the
standard user interface layout of Blend to get comfortable with the
various elements. The starting user interface contains several elements,
as shown in Figure 2.
Figure 2. Blend user interface
The basic interface of Blend is made up of five main areas (labeled #1 through #5 in Figure 2):
1. Toolbar: Commonly used tools live here.
2. Common panels: These include Project, Assets, and other panels.
3. Objects and Timeline panel: This is the basic layout/navigation panel.
4. Artboard: This is the basic design surface for Blend.
5. Item panels: These include Properties, Resources, and Data panels.
As you start using Blend, you’ll need to become pretty familiar with
how each section can help you. The first area to get comfortable with is
the toolbar. The toolbar contains many of the basic tools you will use
to create your design. You can see the toolbar (and its submenus) in Figure 3.
Figure 3. Blend toolbar
The basic toolbar is divided into five sections. Some of the
individual toolbar buttons support holding them down to show a list of
other toolbar buttons (as shown in the items labeled A–F in the figure).
You can tell that a toolbar button supports multiple options by the
small rectangle in the lower-right side of the button. The various
toolbar sections are as follows:
1. Selection tools: Selection and Direction Selection
2. View tools: Hand and Zoom
3. Brush tools: Eye Dropper, Paint Bucket, Gradient tool, and Brush Transform (see A)
4. Object tools: A variety of tools to create different objects on the design surface (as shown in B–F)
5. Asset tools: The Asset button and Last Asset Used button
The Common Panel section of the Blend UI contains several commonly
used panels. The two that you will interact with the most are the
Projects panel and the Assets panel.
The Projects panel provides a list of all the projects and files in a
Blend project. If you are a designer and are new to Blend, one of the
biggest changes you will need to get comfortable with is the idea that
you are working with a project with multiple files, not just a single
design file. The Projects panel (shown in Figure 4) shows all the files in the current project.
Figure 4. Projects panel
The Projects panel contains the solution file that contains one or
more projects. In this example there is only one project, but you could
have additional projects listed, such as libraries of shared designs or
code. This panel is also where you would add other assets (for example,
fonts, images, and so on) to the project. Everything in the project can
be merged into the resultant phone application.
Another important panel is the Assets panel. Whereas the toolbar
buttons give you access to the most common design elements (drawing
shapes, containers, and controls), the Assets panel includes all the
design elements you can add to a Windows Phone application. The Assets
panel is made up of three sections, as shown in Figure 5.
Figure 5. Assets panel
As you will see in other parts of Blend, the panel starts with a search bar (#1 in Figure 5).
Because the Assets panel can contain quite a lot of controls and other
assets, searching for assets is often the quickest way to find the asset
you are looking for. The categories on the left (#2) separate the
different types of assets by individual categories. Notice the small
triangles that indicate that some of the asset categories have
subcategories. By making a selection in a category, you will display all
the controls that fit in that category (or subcategory). As you can see
in Figure 5,
the categories are a mix of asset type (for example, Media, Controls,
and Shapes) as well as location (for example, Locations and Project).
This means an asset could be in more than one category. When a category
is selected, the asset list (#3) shows the controls in that particular
category or subcategory.
The next section of the user interface to look at is the Objects and
Timeline panel. This panel lets you review the hierarchy of the objects
in your design as well as facilitates the animation design process.
Dealing with your object graph is the main purpose of this panel. For managing
the object graph, the Objects and Timeline panel has several key parts,
as shown in Figure 6.
Figure 6. Objects and Timeline panel
The object graph (#1 in Figure 6) shows all the objects in your design. In this example you can see the Page; the ApplicationBar; and the Grid (called LayoutRoot),
which contains a couple of other objects. This object graph is the same
as the hierarchy of the XAML. The symbol on the left side of each
object indicates the object type (they match the icons on the toolbar
and Assets panel). For named members, the name is shown in the
hierarchy; if an object is not named, it will be the object type
surrounded by brackets (as seen for the PhoneApplicationPage).
When adding new elements to your design, it can be helpful to know
what the current container is (which will tell you where new elements
will be added). You can see the current container directly in the
Objects and Timeline panel because that container will have a blue
rectangle around it (#2 in Figure 6).
For every element in the object graph, the panel allows you to decide
whether to hide or lock the object. The area toward the top right (#3
in Figure 6)
defines a column for both hiding and locking an object (or a container
and its children). Clicking the icons to the right of the objects in the
hierarchy will change whether they are shown or locked on the design
surface. These changes are purely design-time and have no effect on the
runtime look and feel of the objects.
As you move from different objects in your design, the name and icon
(#4) give you the ability to move back up to the last editing space.
When we talk about styling using Blend, I will show you how this control
comes into play.
Lastly, the icon on the lower left of the screen (#5) gives you the
ability to flip the object graph order. This button only affects how the
graph is displayed in the Objects and Timeline panel. Although XAML is
written top-down (like HTML), the object graph will show that order. If
you click the icon, it will flip this order. This reverse order is
easier for people who are used to Photoshop or other design tools where
the drawing order looks bottom-up.
Moving on to the artboard, shown in Figure 7,
the main element (#1) of the artboard is much like any other design
tool (even Microsoft Paint) in that it enables you to drop and
manipulate objects directly. It uses the same handles metaphor as most
other design tools as well (for example, the small squares on the sides
and corners allow you to grab and resize anything on the artboard). Only
the selected object(s) on the artboard will show its handles.
Figure 7. Artboard
On the top of the artboard (#2) are document tabs. For each document
(for example, XAML file) you have open, a tab is created. Clicking
individual tabs enables you to switch to that document. The view buttons
(#3) allow you to switch from the design view to a XAML textual view or
to a split view showing both the design and the XAML.
Immediately below the document tags is an indicator of the selected
item on the design surface. This can be a drop-down (#4) for objects
that have contextual menu items (for example, controls), or it might be a
flat box with the type of control selected. This area will also show a
breadcrumb of the different subobject design surfaces (for example, when
editing a style or template) to ease the navigation back to the
original design surface.
Lastly, the artboard has a zoom drop-down box (#5) to enable you to
change the zoom level and a number of design option buttons that can be
toggled on or off to show annotations, show gridlines, and enable
rendering of effects.
The last section of the main Blend user interface is the Item Tools
section. This section is made up of several important panels, as shown
in Figure 8.
Figure 8. Item Tools panel
This section provides tabs for several panels including (typically)
Properties, Resources, and Data (#1). The main panel you will use while
you are designing your Windows Phone application is the Properties
panel. The main section (#2) of the Properties panel is the list of
properties. If you are coming from Visual Studio, the organization and
look of the Properties panel is quite different. The properties are
sorted into logical groups—for example, Brushes (#3), Appearance, and so
on. These groups are collapsible sections that will help you find
related properties. Near the end of most of the groups will be a further
collapsed section (#4) of less commonly used properties. You can click
this arrow icon to open more properties.
Near the top of the Properties panel is an indicator of the name and
type of control (#5). If you want or need to name an element, you can
simply type it in here. Under the name/type section is the search bar
(#6) that lets you search for property names. This is useful for finding
property names because most of the controls have large numbers of
properties. The search is a straight substring match, so, for example,
typing “vis” in the search bar will result in both “Visibility” and
“IsHitTestVisible,” as shown in Figure 9.
Figure 9. Searching in the Properties panel
Lastly, the Properties panel also has a switch (#7) to
change between showing properties and events. Now that you have taken a
basic tour of the Blend user interface, let’s look at some common tasks
using Blend for your design.
