Microsoft Expression Blend is a design tool
that allows you to create fantastic user interfaces for such Windows based
applications and Web applications. You can use Expression Blend with .NET
Framework 3.0, 3.5, and 4.0 applications.
This article will focus on the use of Expression Blend for Silverlight.
What Blend can do for you
One of the prime advantages of Expression Blend is its ability to separate code
from design. Using Blend, designers can work independently on one set of
deliverables for a project while developers can work on another. But this
doesn't mean that Blend is just for designers alone. Developers can equally take
advantage of the features that Blend has to offer.
Expression Blend allows you to design your application visually, by creating or
drawing shapes, paths, and controls on an artboard, and then modifying their
appearance and behavior by configuring their properties.
Working with Blend
You can create a new Silverlight project by clicking File->New in Expression
Blend. The New Project dialog box shows various project types.
![Primer in Expression Blend]()
Figure 1 - New Project Dialog Box
The various project types are described as follows:
- Silverlight Application + Website:
Creates a project with an associated website that you can publish to a web
server.
- Silverlight Application: Creates a
project that creates an application that can be run in the Silverlight
runtime viewer, inside or outside a browser window. It includes an HTML test
page named Default.html that will load your application in a browser window.
- Silverlight Databound Application:
Creates a project that uses data and command bindings to support loose
coupling between a View and a ViewModel.
- Silverlight Control Library: Creates
a project for creating custom controls which you can reuse in other
Silverlight projects.
- Silverlight SketchFlow Application: Creates
a project for prototyping cross-platform, web-based applications. SketchFlow
is available only in Expression Studio Ultimate.
The Blend IDE
By default, the Design view shows the Projects window pane open on the right. In
the center, you see the white artboard or the drawing area. This is where you
will be drawing controls and placing items.
On the left, you will see the Toolbox containing the controls and objects that
you can use for drawing. Let us look at all these elements in detail.
The Projects window
This window shows the default files created for a Silverlight project in Blend.
The Toolbox
The Toolbox contains various objects and controls that can help you create a
fantastic user interface for Silverlight applications.
The Selection tools are used to select objects and paths.
The Magnify or Zoom tool is used to provide different views of the artboard and
objects.
The Pan tool is used to position the artboard in the workspace area.
The Brush tools are used to configure the color and other visual settings of
objects such as controls and paths.
The Object tools include a number of controls and shapes that you can create or
use in Blend applications.
The Asset tool opens the Asset Library, a collection of various controls and
shapes.
![simple Primer in Expression Blend]()
Figure 2- Toolbox Pane
Working with Controls
The Toolbox pane provides options to create various kinds of controls. When you
scroll down the Toolbox and click the small triangle next to the TextBlock, you
will see additional controls popping up as shown in Figure 2.
![Expression Blend]()
Figure 3 - Controls
The property headings commonly seen for most controls are:
- Brushes
- Appearance
- Layout
- Common Properties
- Transform
Brushes
These properties include the standard set of
brushes available for most controls: No Brush, Solid Brush, Gradient Brush and
Tile Brush. These are represented by the square icons that you see in Figure 4.
(highlighted here in red just so that you may easily identify them).
![Expression studio]()
Figure 4 - Brushes
By changing these properties, you can manipulate the appearance of a control
with respect to its foreground and/or background. For example, a TextBlock
control does not have a Background property but has only a Foreground property
that you can change as per your requirements.
Appearance
Properties in this category include Opacity and Visibility. Opacity is set to
100% by default. Visibility is set to Visible by default.
Layout
This property group represents the physical layout and positioning of the
control.
The default values for this group are listed in the table:
![Expression Blend]()
Common Properties
This property group represents the common set of properties that are present for
most controls. These are listed in the table:
![Microsoft Expression Blend]()
Text
This property group is further divided into three sub categories:
Font: This property comprises of font family, font size, font style,
embedding, static and dynamic subsets that allow you to specify how to embed the
characters in this element.
Paragraph:
- LineHeight
- Paragraph spacing before
- Paragraph spacing after
Text alignment: By default, this is Left
but can be changed to Center or Right.
- Line Indent
- Left Indent
- Right Indent
- First Line Indent
The next property group is Transform, which
controls the transformation of the control. Following are some types of
transforms:
- RenderTransform
- RotateTransform
- SkewTransform
Conclusion: This article just briefly
introduced you to Expression Blend. Stay tuned for further articles on Blend.