Get started with Blend for Visual Studio 2013

Blend for Visual Studio is a visual tool for building engaging user interfaces and rich media experiences for Windows desktop, web, Windows Phone, and Windows Store apps. Blend supports Windows Presentation Foundation (WPF) and Silverlight, and includes SketchFlow for prototyping (in Visual Studio Ultimate and Premium editions).

Blend for Visual Studio replaces Expression Blend. For information about other Expression products and support options, see the Microsoft Expression Changes page.

Blend stores your work in an XML-based declarative markup language (XAML). It also supports HTML5/CSS3/JavaScript code for web apps. You can make your UI changes visually in design view, which is where Blend shines, or fine-tune the UI in XAML. (Learn how to design your XAML UI with Blend.) You can then hook up the UI to your app code in Visual Studio.

Blend is installed when you install Visual Studio. It’s available in Visual Studio Professional 2013 with Update 2 and later. To open it:

  • Type Blend from the Windows Start screen.

    —or—

  • Open a WPF, Silverlight, Windows Phone, or Windows Store project in Visual Studio, and then choose Open in Blend from the View menu or from the shortcut menu for the project.

Visual Studio provides a code-first approach to development. It also has an excellent designer, so you can add UI elements to your app during development. You can use frameworks such as Windows Presentation Foundation or Silverlight to build your UI. However, animations and custom controls often require familiarity with complex concepts and extensive coding expertise.

Blend provides a visual workspace where you can build new UI or manipulate your existing UI more quickly and intuitively. Blend’s tool palette is more extensive and sophisticated than Visual Studio’s palette, so you can do a lot more. (For example, you can create animations and set projection planes to add 3-D effects to controls directly in the designer.) You increase your productivity by using the best tool for each job: design your app’s UI in Blend, tweak the underlying XAML if you want, and then use the Visual Studio code editor to program additional functionality and debug your app. You can have the same project open in both Visual Studio and Blend, and switch back and forth between your design and your code for the fastest results.

For example, here’s the code for animating a shape in C#:

Creating an animation in C# code

Here’s a snapshot of the experience in Blend:

Creating an animation in Blend

To increase your productivity, consider using Blend for the following tasks. These are the areas where Blend offers more speed and functionality than the Visual Studio designer or code alone.

To

Visual Studio alone

Visual Studio with Blend

More information

Create animations

There is no design tool for animations; you have to create them programmatically. This requires an understanding of the animation and timing system in WPF and extensive coding expertise.

For Windows Store apps, creating animations requires fluency in XAML or HTM5, CSS, and JavaScript.

You create animations visually and can preview them in Blend. This is faster and more accurate than building your animations in code. You can add triggers to handle user interaction, and you can switch to code to add event handlers and other functionality.

Blend also supports timeline-based authoring for CSS animations (as specified by the W3C) without requiring JavaScript code. You can edit your animations directly within your app so you can see how it interacts with other elements.

Animate objects in Blend

Turn shapes and text into paths for easier manipulation

Not supported.

You can make subtle or dramatic changes to shapes (such as rectangles and ellipses) by converting them to paths, which provide better editing control. You can reshape or combine paths, and create compound paths from multiple shapes.

You can also convert text blocks into paths to manipulate them as vector images.

Draw shapes and paths in Blend

Add interactivity to your UI designs

Requires C#, Visual Basic, or C++ code.

Drag and drop behaviors onto controls to add interactivity to your static designs. Behaviors are ready-to-use code snippets that encapsulate functionality such as drag/drop, zoom, and visual state changes. There’s a growing set of behaviors you can choose from, and you can create your own.

You can then customize each behavior by changing its properties in Blend or by adding event handlers in code.

Insert controls and modify their behavior in Blend

Edit your app interactively

Not supported.

Interact with your HTML app as it’s running and make changes (for example, toggle a button, change an option, or draw on a canvas). Your changes are preserved when you return to edit mode. You can also use interactive mode to pause your running app in a specific state, edit its underlying code, and see the effects right away.

Use interactive mode

Use Adobe artwork

Not supported.

Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend and Visual Studio.

Insert images, videos, and audio clips in Blend

Edit controls, templates, and styles

Requires coding and knowledge of WPF styles and templates.

Turn any image into a control.

Use the template editing tools to make changes to controls, styles, and templates with just a few mouse clicks.

For example, you can use Blend style resources to implement common WPF controls (such as buttons, list boxes, scroll bars, menus, etc.), and change their color, style, or underlying template directly in Blend. You can then switch to code for finishing touches if you want.

Modify the style of objects in Blend

Connect your UI to data

You can create a data source from resources such as SQL Server databases, WCF or web services, objects, or SharePoint lists, and bind the data source to your UI controls.

Design-time data must be created by hand for an interactive design experience.

Create sample data easily for prototyping and testing. Switch to live data when you’re ready.

Blend’s data generation capabilities are outstanding (you can add names, numbers, URLs, photos easily on the fly), and can save you a lot of time.

For live data, you can bind your UI controls to an XML file or to any CLR data source.

Display data in Blend

Design a Windows Phone or Windows Store app

Limited capabilities in the designer; you have to use XAML for complex work.

(Windows Phone support requires Visual Studio Professional 2013 with Update 2 or later.)

Blend gives you extensive design capabilities, and speeds up and simplifies your app development. Build your app from start to finish in the Blend designer, test it in the emulators, and integrate it with your own code for additional functionality.

Designing Windows Phone apps with Blend

Blend for Visual Studio 2012 (Windows Store apps)

Authoring Windows Store Apps in Blend (MSDN Magazine)

Create storyboards and prototypes

You must code your prototype in Visual Basic or C#, or use a separate tool such as Adobe Director or Flash.

Use SketchFlow to draw and build a working prototype that can be turned into a functional app without requiring reimplementation.

You can animate and add notations to your SketchFlow prototypes. You can also share your prototypes with others, run usability studies, and get feedback over SharePoint or in the SketchFlow Player.

Prototyping with SketchFlow in Blend

To

See

Jumpstart your work with a guided tour of Blend

Designing your XAML UI with Blend (Microsoft Virtual Academy)

Find out why developers switch to Blend

How Blend made creating a Windows 8 app in 24 hours easy (blog post)

See what’s new in the latest version of Blend

What’s new for HTML developers (blog post)

What’s new for Windows Store XAML apps (blog post)

Become familiar with the Blend workspace.

Tour of the Blend workspace

Use layout panels and controls to organize controls, images, and other objects on a page

Organize objects into layout containers

Enable users to interact with your app.

Insert controls and modify their behavior

Add visual appeal to your app by introducing images, videos, and audio clips.

Insert images, videos, and audio clips in Blend

Create, modify, and animate 3D objects.

Inserting 3D objects in Blend

Add shapes or draw free-form patterns. Style them, convert them to controls, or use them to create paths for an animation.

Animate objects in Blend

Change the way that objects appear, create styles and templates that you can apply to several objects.

Display data in Blend

Create short animations that move objects, or fade them in and out.

Modify the style of objects in Blend

View sample data in your designer as you customize the layout of your pages.

Display data

Build a working prototype that can be turned into a functional app without requiring reimplementation.

Prototyping with SketchFlow in Blend

Design Windows Phone and Windows Store apps

Designing Windows Phone apps with Blend

Designing Windows Store apps with Blend

Get additional resources for developing Store apps

Windows App Builder blog

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft