Design Windows Store apps using Blend for Visual Studio 2013

Blend for Visual Studio is a collection of design tools included with Visual Studio 2013 that you can use to visually build Windows Store apps built using JavaScript, VB, C#, or C++.

Blend is installed when you install Visual Studio. To locate Blend, type Blend in the Search box.

You can also open a project in Blend from within Visual Studio. With the project open in Visual Studio, do one of the following:

  • On the View menu, click Open in Blend.

  • Right-click the project file in the Solution Explorer, and then click Open in Blend.

    Open in Blend command in Visual Studio

For Windows Store apps built using JavaScript, Blend includes a suite of HTML5 and CSS3 tools that enable you to accomplish tasks such as quickly creating CSS3 animations, defining and managing styles, and debugging HTML and CSS. For more information, see "Designing Windows Store apps (HTML)" later in this article.

To create your first HTML Windows Store app with Blend, see Create your first Windows Store app with Blend, part 1: the master page (HTML & JavaScript).

For Windows Store apps built using VB, C#, or C++, Blend includes a suite of XAML tools that help you with tasks such as quickly applying styles to controls, creating and defining templates, and binding to sample data. For more information, see "Designing Windows Store apps (XAML)" later in this article.

To create your first HTML Windows Store app withBlend, see Create your first Windows Store app with Blend, part 1: the master page (XAML & C#).

For more information about what's new in Blend, see What’s new for HTML Developers in Blend for Visual Studio 2013 and What’s new in Visual Studio 2013 Preview for authoring Windows Store XAML apps on the the Visual Studio blog.

Use Blend with Visual Studio

Visual Studio provides essential tools for developing Windows Store apps, including developer license management, the Manifest Designer, and the coding and packaging tools that make it possible to submit your app to the Windows Store.

By using Blend in conjunction with Visual Studio, you can take advantage of the powerful HTML and XAML design tools in Blend to more quickly and easily customize the appearance of your app. You can focus on visually building your application from the bottom up, including the structure, layout, data views, and look and feel of your app, instead of focusing on the syntax of your code.

For more information about using Blend with Visual Studio, including recommended workflows and best practices, see the Switch to Visual Studio and back again.

You can open and edit Windows Store app projects created in Visual Studio in Blend, as well as open and edit Windows Store apps created in Blend in Visual Studio.

You can easily switch back and forth between Blend and Visual Studio while you're working on a project. To switch from Visual Studio to Blend, right-click the project in Solution Explorer, and then click Open in Blend. To switch from Blend to Visual Studio, right-click the project in the Projects panel, and then click Edit in Visual Studio.

Tip

You can have the same project file open in both Blend and in Visual Studio at the same time, on the same computer. When you save a change to a file in one tool and then switch to the other, you'll be asked if you want to reload the file in order to view the most up-to-date version of the project.

Design Windows Store apps (JavaScript & HTML)

With Blend, you can create a new Windows Store app by using one of the built-in HTML project templates, or open an existing Windows Store app that was created in Visual Studio. Like any native Windows application, a Windows Store app built using HTML5, CSS3, and JavaScript has direct access to the underlying platform and is able to share information with other applications.

You can quickly modify the appearance of your app using a powerful set of HTML5 and CSS3 design tools that enable you to:

  • Create and modify HTML elements   Drag and drop HTML elements and Windows app controls from the Assets panel onto the artboard, and then modify the hierarchy, set properties and apply styles directly in the UI. See Create and style an item template.

  • View run-time states   Use interactive mode to access and then modify your app in states that would otherwise be available only at run time. Use interactive mode.

  • Display design-time data   Bind to and display data in your Windows Store app so that you can more easily modify the appearance of your data at run time. See Bind to the movie data.

  • Embed custom fonts   Use the font-family manager to embed custom fonts into your Windows Store app. See Use a custom font in a Windows Store app (HTML).

  • Create CSS3 animations   Create and edit CSS3 animations by using the built-in keyframe animation timeline.

  • Define and manage styles   Quickly create CSS styles using the Style Rules panel, and then use the CSS Properties panel to apply style definitions, view the CSS cascade for any element (the Winning Properties virtual rule), or determine how Windows 8.1 will compute CSS property values for each element (the Computed Values virtual rule). See Define CSS style rules.

  • Debug HTML and CSS    Visually debug your HTML and CSS directly in Blend by identifying and resolving errors displayed in the Results panel.

For more about what's new for designing Windows Store apps built with JavaScript in Blend, see the Visual Studio blog.

Design Windows Store apps (VB/C#/C++ and XAML)

With Blend, you can create a new Windows Store app by using one of the built-in XAML project templates, or open an existing Windows Store app that was created in Visual Studio. Like any native Windows application, a Windows Store app built using XAML and VB, C#, or C++ has direct access to the underlying platform and is able to share information with other applications.

You can quickly modify the appearance of your app using a powerful set of XAML design tools that enable you to:

  • Design a custom layout   Use powerful layout tools, including templates, built-in controls, rulers, guides, and snapping support, to design custom layouts for your Windows Store app. See Style the data view.

  • Create and style controls   Drag and drop controls onto the design surface, and then style them by modifying properties directly in the UI. Style images and elements.

  • Create and edit control templates   Use the template editing tools to create custom control templates that can be reused throughout your project. Add them to your control library to reuse them in projects outside of the current project. See Make an image into a user control.

  • Create and edit data templates   Create templates that define how you want your data to be displayed in your app. See Create and style the data bindings.

  • Display sample and design-time data   Bind to and display data in your Windows Store app so that you can more easily modify the appearance of your data at run time. See Set the DataContext.

  • Use behaviors to add interactivity   Add interactivity to your app by dragging a built-in behavior onto the object on the design surface and modifying the properties to suit your needs. See Add a built-in behavior

  • Edit XAML markup   In addition to the UI tools that make it easy to create and modify XAML without touching code, Blend also features a powerful XAML editor that enables you to quickly and easily make changes directly in the XAML markup. See Debug XAML in Blend.

For more about what's new for designing Windows Store apps built with C#, C++, and VB in Blend, see the Visual Studio blog.

Resources

In addition to the Blend documentation on the Windows Dev Center, you'll find a wide variety of resources to help you get started with creating and designing Windows Store apps, including: