Expression Blend: Design a new experience, by Guillaume André

Guillaume André Designer Wygwam

Microsoft Expression Blend: Design a new experience, by Guillaume André

The arrival of new technologies Microsoft® Windows® Presentation Foundation (WPF) and Microsoft Silverlight™ presents a new interface language called XAML (eXtensible Application Markup Language) to us. This language is based on XML, and is therefore declarative, letting graphic designers create advanced interfaces and user experiences based on rich media, animations, interactions, and, WPF-based 3D.

Microsoft Expression Blend™ was designed to help interactive designers work more closely with developers, which enables them to create, edit, and skin components that use a visual interface while leveraging these new WPF and Silverlight technologies.

Introduction

Expression Blend is designed for user interface (UI) designers. The application lets them create rich interfaces in XAML. This article discusses the application’s principal features and characteristics.

To preview version 1, download the trial version at the following location:
http://www.microsoft.com/expression/products/download.aspx?key=blend

You can also download a preview of version 2 at the following location:
http://www.microsoft.com/expression/products/download.aspx?key=blend2preview

The principal difference between the two versions of Expression Blend is that Expression Blend 2 introduces features that provide support for JavaScript Silverlight 1.0-based applications and managed Silverlight 1.1 Alpha Refresh-based applications.

A collaborative tool

The workspace

Like its sibling Expression® Design, Expression Blend benefits from the same graphic style that characterizes the Expression series.

• A classic menu appears on the upper part of the screen. This menu provides access to all software functions. View Details
• The toolbar on the left side of the screen gives you access to classic tools such as the pen, zooming tool, gradient tool, and more. View Details
• In the Interaction panel, you can create your own animations by associating certain user actions with specific animations. View Details
• The Project panel shows the tree for your current WPF-based or Silverlight-based project. View Details
• The Properties panel handles all rendering. You can directly access and modify the selected object’s properties, and modify or apply gradients, brushes, and more. View Details
• The Resources panel lets you add resources to the project. An example resource could be a button’s “styling” aspects. View Details
• The Results panel shows any possible errors in XAML and the coding during the compilation of your application. View Details

The Expression Blend interface is based on WPF technology, which you can personalize. The interface is vector-based, so you can easily adjust the size of the workspace as well as the amount of zoom for the entire interface by setting options in the Options dialog box (Tools menu).

When Expression Blend generates XAML code, you can view it in the XAML tab.

Collaboration with developers

In the Project panel, you can open your project in either of two languages: Visual Basic® (.vbproj) or Visual C#® (.csproj).

This choice gives developers the option to focus on their preferred programming language without consequences for the graphic designer. The projects that Expression Blend generates are compatible with Microsoft Visual Studio®, and therefore let developers reuse design and other files.

Create “next generation” interfaces

Expression Blend can also create animations. To do this, we recommend that you change to the Animation Workspace mode (press F7), as shown in the illustration.

Creating a basic animation will show you how this tool works. Start by creating a project.

1. On the File menu, click New Project. Make sure Standard Application (.exe) is selected.
2. Under Objects and Timeline in the Interaction panel, add a timeline using the +Create new timeline button (plus sign). View Details
3. Draw a rectangle on the artboard. You may want to add a stroke or change the fill color using the color picker in the Properties panel. View Details
4. Finally, drag the playhead (yellow bar) to another moment in time on the timeline.
5. After you finish this task, use the Selection tool to move the rectangle to a new location on the artboard. View Details
6. Click the Play button to play your animation.

As you can see, it is simple to create animations yourself. To make your rich applications even more interactive, you can associate animations with events. By default, every animation is started when the page is loaded. You can modify, add, or delete events (also named triggers) under Triggers in the Interaction panel. Click the + Events tab to add an event and select the triggering element in the When box to use the event you want. In this example, the animation is started by the MouseDown event for the rectangle.

Create interactions without using code

Expression Blend lets you create interactions between the elements of your applications without having to write any code. For instance, data binding enables you to connect the property of one object to the property of another object. As an example, binding the size of a rectangle to the value of a slider lets the user resize his or her rectangle. You can perform the data binding on the XAML side, which therefore doesn’t necessarily require coding. The exercise below shows how data binding works. The goal of this exercise is to connect the size of selected text to the value of a slider. This creates a “zoom” effect on the text when the slider is animated.

1. Begin by adding a Slider element (name it “mySlider”) and a TextBlock element (name it “myTextBlock”) to the artboard using the Asset Library (CTRL+PERIOD). View Details
2. Select myTextBlock element.
3. In the Properties panel, click the Text category to expand it.
4. Click the small square (Advanced property options) located to the right of the font size list. View Details
5. In the context menu, click Data Binding. View Details
6. The Create Data Binding dialog box appears. On the Element Property tab, choose the mySlider element located in the Scene elements column. View Details
7. In the right-hand column, choose the property Value.
8. Click Finish. You’ll notice an orange border appear around the text box of the property that has been bound. View Details

You have just finished some data binding, and you can view what you’ve done on the XAML tab. You can also compile your application and see the result by pressing F5. Notice that when you move the slider, the text decreases or increases in size. Of course, you can also modify the sizes through the slider properties (minimum and maximum).

Conclusion

Expression Blend is an application designed for graphic designers and interaction designers or developers who want to create rich applications with rich interfaces. Expression Blend uses WPF, one of the most advanced tools on the market, for creating rich interfaces. The WYSIWYG environment is easy to use, and it enables users to produce striking results. To see more example applications, click the Samples tab on the Welcome Screen (Help menu).