Create Windows Store apps with Blend (HTML)

By using Blend in conjunction with Visual Studio, you can take advantage of the HTML design tools in Blend to build complex user interfaces for Windows Store apps. You can enhance your HTML apps by using Blend to embed fonts and build CSS3 animations. You can even use Blend to help you fix errors as you go.

With Blend, you can focus on visually creating your UI rather than the syntax of your code.

When you use Blend for your UI design tasks, you have access two different views of your app:

  • Design time view   When you are working in Blend, you are working on a live version of your app. This means that what you see on the design surface is what the user will see when the app is running on their device.

  • Run-time view   When you use interactive mode, you can access views of your app that are only accessible at run time. By using interactive mode to access the run-time view of your app, you can load those run-time views onto the design surface, and then modify the appearance of those views, all without having to compile your code.

    For more information, see Use interactive mode.

You can also switch between Blend and Visual Studio while you're working on a project. You can even have the same project file open 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 simply reload the file to refresh the view of your project.

Topic

Description

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

Create the home page of an app that browses through new movie releases by connecting to the Rotten Tomatoes API, and learn how to:

Create your first Windows Store app with Blend, part 2: the details page (HTML & JavaScript)

Create the details page of an app that browses through new movie releases by connecting to the Rotten Tomatoes API, and learn how to:

Use a custom font in a Windows Store app (HTML)

Use a custom font in your app by embedding it using CSS3

Create a CSS3 animation

Use the Properties panel and the Animation timeline to create a CSS3 animation

Debug HTML and CSS

Use the CSS Properties panel to diagnose display issues related to the CSS cascade

Show:
© 2014 Microsoft