Share via


About Expression Blend

Microsoft Expression Blend is a visual tool for designing and prototyping desktop and web applications. You build an application by drawing shapes, drawing controls such as buttons and list boxes, making the pieces of your application respond to mouse clicks and other user input, and styling everything to look uniquely your own.

Important

SketchFlow is available only in Expression Studio Ultimate.

The BeeHive sample, showing the drawing of an object that will respond to a collision with another object

Cc296376.6232ba4d-5aa0-4185-b1cf-fe9fbfe3ed8e(en-us,Expression.40).png

You can also insert images, audio and video clips, and custom controls from SDK libraries or third parties. What you see on the design surface in Expression Blend is what your users will see when they run your application.

The Zune3D sample, showing images and objects rotated in a 3D projection transformation

Cc296376.37f9786c-c8bc-43c3-8789-2e5654c6ae90(en-us,Expression.40).png

With SketchFlow, a feature set available only in Expression Studio Ultimate, you can create prototypes that are functioning applications instead of a series of static images that must be clicked through to get a sense of your final application.

The development of the PCGaming sample, showing the progression of a document

Cc296376.7dc469b2-4ab8-4d56-96a6-f30c33370916(en-us,Expression.40).png

With Expression Blend for Windows Phone, available when you download the Windows Phone Developer Tools Cc296376.xtlink_newWindow(en-us,Expression.40).png, you can quickly and easily build Silverlight applications for Windows Phone. You can use the design tools in Expression Blend to create your Windows Phone application, including Windows Phone templates, graphics and animation tools, built-in behaviors, and sample data. Once you’ve created your Windows Phone application, you can build it and then preview it either in the built-in Windows Phone Emulator, or in a Windows Phone device attached to your computer.

Expression Blend for Windows Phone

In Expression Blend, you work on real pieces of a working application, but you can still draw and style everything as easily as you can in other illustration software. When you want to draw something that represents an interactive control, you can actually select and draw a functioning control (such as a button or a list box) and then style it.

The ColorSwatchSL sample, showing two custom styles (ItemContainerStyle, then ItemsPanel) being applied to a ListBox control to display items fanned in a circle

Cc296376.16d8c960-f49f-46fd-9993-a0d06b4e268a(en-us,Expression.40).png

Behind the scenes, the functionality of your application is provided by two powerful technologies: Microsoft Silverlight and Windows Presentation Foundation (WPF). With Expression Blend, you can create websites and applications based on Silverlight, and desktop applications based on WPF.

Tip

The samples that come with Expression Blend can be opened from the Help menu by clicking Welcome Screen, clicking the Samples tab, and then clicking a sample name from the list. To build and run a sample, press F5.

How does Expression Blend work?

In Expression Blend, you design your application visually, drawing shapes, paths, and controls on the artboard, and then modifying their appearance and behavior. You can import images, video, and sound. In Windows-based applications, you can also import and change 3D objects.

You can create storyboards that animate the visual or audio elements of your design, and optionally trigger those storyboards when users interact with your application. When you work on Windows-based or Silverlight-based applications, you can redesign the templates that are applied to basic controls so that the look and behavior of your application are unique.

When you work on your application, you can update your project at any time with code-behind files or custom control files that programmers are working on. When you use Expression Blend, designers and programmers can work on the same project at the same time without getting in each other's way.

What other applications work with Expression Blend?

You can import graphics and Extensible Application Markup Language (XAML) resources that are generated by Microsoft Expression Design into your Expression Blend project. You can also import Silverlight media projects that were created in Microsoft Expression Encoder, to add new features or visual elements to the project, or to modify the media player template that can be reused in Expression Encoder.

In Microsoft Expression Web, you can import Silverlight websites and compiled Silverlight application files into an existing or new project, and then publish your work.

Microsoft Visual Studio 2010 works seamlessly with Expression Blend to stay in sync when you are simultaneously modifying files in Visual Studio 2010 and Expression Blend. In Expression Blend, you can open individual code-behind files or your whole project in Visual Studio 2010. You can also use the deployment tools of Visual Studio 2010 to deploy your applications.

What does Expression Blend produce?

Expression Blend produces Windows Presentation Foundation (WPF) applications, Silverlight websites (.xap and supporting files), and Silverlight user controls. Your visual design is represented by XAML. Just as HTML is the markup language for web applications, XAML is the markup language for WPF.

For more information about XAML and WPF, see Working with XAML and Learning and community resources.

What features come with Expression Blend?

Expression Blend includes the following:

  • SketchFlow, a feature set for creating prototypes that are real WPF or Silverlight applications, is included in Expression Studio Ultimate.

  • Expression Blend for Windows Phone, available when you download the Windows Phone Developer Tools Cc296376.xtlink_newWindow(en-us,Expression.40).png.

  • A full suite of vector drawing tools, which includes text and three-dimensional (3D) tools.

  • An easy-to-use, modern visual interface with dockable panels and on-object shortcut menus.

  • Real-time animation.

  • 3D and media support for enhancing user experiences.

  • Effects and transition support for enhancing user experiences.

  • Project templates for Views and ViewModels.

  • Advanced, flexible, and reusable customization and skinning options for a variety of common controls.

  • Powerful integration points for data sources and external resources.

  • Real-time design and markup views.

  • Artwork import capabilities from Expression Design.

  • Site import capabilities from Expression Encoder.

  • Interoperability with Visual Studio 2010 to help designers and developers work together more closely and efficiently as a team.

For more information about what's available in Expression Blend, see What's new in Expression Blend.

Target application types

Expression Blend is optimized to produce the following types of applications:

  • Productivity applications   Applications that improve productivity and efficiency for a broader customer base, in addition to line-of-business applications such as Microsoft Office.

  • Windows Phone applications   Applications designed to run on Windows Phone.

  • Consumer applications   Applications such as media players, security tools, and desktop gadgets.

  • Games   Simple desktop or online games intended for entertainment.

  • Kiosks   Applications intended to run on kiosks that users can interact with to receive information, review product directories, check in at an airport, and so on.

  • IT pro utilities   Tools for small jobs, such as bug tracking, that may be unique to a specific company or customer need.

Best practices

Some design ideas are good just because they improve usability. Here are some common ways to improve usability with Expression Blend and the Microsoft .NET Framework:

  • Model the real world   You can use custom visuals and interactions to make specific controls look and behave like their real-world counterparts. This technique is best used when users are familiar with the real-world object, and the real-world approach is the best, most efficient way to perform the task. For example, simple utilities like calculators just work better when they model their real-world counterparts.

  • Show instead of explain   You can use animations and transitions to show relationships, causes, and effects. This technique is best used to provide information that would otherwise require text to explain what users might miss. For example, a book for young children could animate page turns to show how the controls work.

  • Improve affordance   Affordance is a property of an object that suggests how the object is used (instead of using a label to explain it). You can use custom control visuals and animations to suggest how nonstandard controls are used.

  • Use natural mapping   Natural mapping is a clear relationship between what the user wants to do and how to do it. You can use custom appearances and interactions to create natural mappings when standard common controls won't do.

  • Reduce required knowledge   You can use custom interactions to limit the number of ways to perform an operation and the amount of knowledge required to perform a task.

  • Improve feedback   You can use custom control visuals and animations to give feedback that shows when the user is doing something correctly or incorrectly, or to show progress. For example, the Address bar in Internet Explorer in Windows Vista and Windows 7 shows the progress of loading the page in the background.

  • Make objects easier to interact with   A model of human movement known as Fitts' law states that the effort required to click a target is proportional to its distance and inversely proportional to its size. For example, you can use animations to make objects larger when the pointer is nearby and smaller when the pointer is far away. Doing so makes the objects easier to click. It also lets you use screen space more efficiently, by typically making objects smaller.

  • Focus   You can use rich layout and custom visuals to emphasize screen elements that are required for the task, and to de-emphasize secondary elements.

Note

If you are designing for Windows, consider adhering to the Windows User Experience Interaction Guidelines Cc296376.xtlink_newWindow(en-us,Expression.40).png to establish a high-quality, consistent baseline for all Windows-based applications, regardless of how they are implemented.

See also

Concepts

What's new in Expression Blend
Learning and community resources

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.