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.
How to get Blend
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.
Why use Blend?
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#:
.png "Creating an animation in C# code")
Here’s a snapshot of the experience in Blend:
.png "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. |
|
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. |
|
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. |
|
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 Adobe artwork |
Not supported. |
Import Adobe FXG, PhotoShop, or Illustrator artwork and implement the UI in Blend and Visual Studio. |
|
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. |
|
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. |
|
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. |
Resources
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. |
|
Use layout panels and controls to organize controls, images, and other objects on a page |
|
Enable users to interact with your app. |
|
Add visual appeal to your app by introducing images, videos, and audio clips. |
|
Create, modify, and animate 3D objects. |
|
Add shapes or draw free-form patterns. Style them, convert them to controls, or use them to create paths for an animation. |
|
Change the way that objects appear, create styles and templates that you can apply to several objects. |
|
Create short animations that move objects, or fade them in and out. |
|
View sample data in your designer as you customize the layout of your pages. |
|
Build a working prototype that can be turned into a functional app without requiring reimplementation. |
|
Design Windows Phone and Windows Store apps |
|
Get additional resources for developing Store apps |