Blog

An Overview of Expression Blend

Gradient Girl / Wednesday, May 8, 2013

While it is fairly easy to hand-code XAML in the Visual Studio IDE for small-scale applications, when it comes to large applications such as games, productivity applications, or Windows Phone applications, developers prefer to use XAML authoring tools such as Expression Blend.

Microsoft Expression Blend is a professional design tool that enables users to create visually appealing and stylish UIs (user interfaces) for WPF and Silverlight applications, as well as Windows Phone applications. The biggest advantage of Expression Blend is that it allows designers to completely focus on the design, while developers give their attention to programming.

Using Blend, you design applications by drawing controls, creating graphical shapes such as rectangles, ellipses, and so on. Based on your UI, images and multimedia such as audio and video can also be added using Blend. In Windows-based applications, 3D objects can also be imported and then configured as desired. Using storyboards in Blend to hold, arrange, style, and animate the various elements, you can achieve a lot of complexity in the UI in a simple manner.

Some of the popular features of Expression Blend are:

·         Easy-to-use, modern visual interface;

·         3D and media support, real-time animation, effects, and transition support for improving user experiences;

·         Project templates for Views and ViewModels;

·         Advanced, flexible, and reusable customization and skinning options;

·         Powerful integration points for data sources and external resources;

·         Real-time design and markup views;

·         Artwork import capabilities from Expression Design;

·         Interoperability with Visual Studio 2010 and Visual Studio 2012.

The Blend Platforms and the version of Blend recommended for use are:

 

Platform
Go live Blend version
Windows Store apps, HTML
Blend for Visual Studio 2012
Windows Store apps, XAML
Blend for Visual Studio 2012
Silverlight 4.0
Expression Blend 4
Silverlight 5.0
Expression Blend Preview for Silverlight 5
WPF 3.5/4.0
Expression Blend 4
WPF 4.5
Microsoft Visual Studio 2012 Professional
WPF/Silverlight Prototypes
Expression Blend 4

Microsoft Visual Studio 2010 and Microsoft Visual Studio 2012 work effortlessly with Expression Blend to maintain sync between the design and the code-behind logic.

The outcome of using Expression Blend results in WPF applications, Silverlight websites (.xap and supporting files), and user controls.

Note that Expression Blend for Windows Phone will be available only when you install the Windows Phone Developer Tools and SketchFlow is available only in Expression Studio Ultimate. (SketchFlow is a tool to model the navigation and composition of an application in a very visual manner. SketchFlow prototypes can be as simple as a series of sketches, but can be built upon to become as complex and real as you need them to be.)

Figure 1 shows a complex dartboard designed using Blend.

Figure 1 -  Dartboard Sample

(Image Source: http://channel9.msdn.com/coding4fun/articles/WPF-Dartboard-scoring-application)

Figure 2 shows a grand piano designed using Blend.

Figure 2  - Grand Piano UI designed using Blend

(Image Source: http://designer-info.com/web/expression-blend/expression-blend-1-review.html)

Figure 3 shows the New Project dialog box that is displayed when creating a Silverlight project using Blend.

Figure 3 - New Project Dialog Box

The Blend IDE
By default, the Design view shows the Projects windowpane open on the right. In the center, the white artboard or the drawing area is seen. This is where controls can be drawn and items placed.
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.

Figure 4- Toolbox Pane

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.

Figure 5 shows the artboard or the workspace and the various panes.

Figure 5 – Workspace Area

Figure 6 shows part of a storyboard created in Blend.

Figure 6 - Storyboard and animations

Now you’re equipped with the tools you’ll need to design stunning WPF, Silverlight and Windows Phone Applications. After viewing some of the examples above, hopefully you’re inspired to get out there and design something of your own!