[This documentation is preliminary and is subject to change.]

Microsoft Visual Studio 2012 RC is a collection of tools that you can use to create, code, debug, localize, package, and deploy a Windows Metro style app. In short, Visual Studio can help you do just about anything you need to do to develop a Metro style app.

If you haven't used Microsoft Visual Studio before, take a quick look around before you start writing code. Visual Studio has a lot of parts, but you don't need to know all about them to get started. After you're finished with the basic steps of setting up a new project, we take a look at the Code Editor and other Visual Studio features.

Important  If you haven't installed Microsoft Visual Studio Express 2012 RC for Windows 8 yet, go here to download and install the tools. If you are updating Metro style apps using JavaScript from Windows 8 Consumer Preview, see Migrating a Metro style app using JavaScript.

Important  Metro style app development in Visual Studio is supported only on Windows 8 Release Preview. Windows 7 is not supported. In addition, developer licenses aren’t available for Windows Server 2012, so you can’t develop Metro style apps on that operating system.

Getting a developer license

You must use a developer license to develop and test Metro style apps before the Windows Store can certify them.

When you run Visual Studio for the first time, it prompts you to obtain a developer license. Read the license terms and then click I Accept if you agree. In the User Account Control (UAC) dialog box, click Yes if you want to continue.

For more info about developer licenses, see Get a developer license.

Creating a project and choosing a template

When you create an app, the first thing you need to do is decide which language to use. You can choose JavaScript, C++, C#, or Visual Basic.

To create a project for a Metro style app, click File > New > Project (or press Ctrl+Shift+N). You'll see the New Project dialog box. Select one of the language nodes in the left pane. You'll see various app templates in the center pane. Some important templates, like Grid App and Split App, are shared between all the languages. A few templates are language-specific. Here are the main templates for Metro style apps.

When you create a project for a Metro style app, Visual Studio creates a solution, which is a way of managing the various source elements of your project (code files, images, style sheets, settings, and so on). A solution container can contain multiple projects, and a project container typically contains multiple items that represent the references, folders, and files that you need to create your app.

Solution Explorer displays solutions, their projects, and the items in those projects. From Solution Explorer, you can open files for editing, add new files to a project, and view solution, project, and item properties. Here is Solution Explorer for a JavaScript project.

In addition to source code files appropriate to the language, each project also includes the package.appxmanifest file, which describes the app package for Windows. Each project also includes several image files, like splashscreen.png for the splash screen image, and storelogo.png, which is used for Windows Store. A project source certificate (.pfx) file required for signing the package is also included in the project.

Designing a user interface

When planning your user interface, it's important to select the most appropriate Visual Studio project template for a starting point, and to learn about adding re-usable item templates such as a Search Target contract. You can develop your UI by writing code or by using a visual designer. A visual designer provides a designer-oriented interface for app design that includes a drag-and-drop interface for building the UI.

For Metro style apps written in JavaScript, you can use the visual designer provided in Blend for Microsoft Visual Studio 2012 RC for Windows 8. You can open a Visual Studio project in Blend by right-clicking the project in Solution Explorer and clicking Open in Expression Blend. Alternatively, open the solution file (.sln) from within Blend.

For Metro style apps built using XAML, you can choose to use the visual designer in Visual Studio, called the XAML Designer, or Blend. The XAML Designer in Visual Studio provides a main designer surface and a toolbox to drag-and-drop controls, very similar to Blend. If you choose to use Blend to design Metro style apps built using XAML, open the solution file (.sln) directly from within its IDE. The following illustration shows the XAML Designer in Visual Studio.

Updating the app manifest

You can use the Manifest Designer in Visual Studio to edit the app manifest file that describes your app package. The app manifest file is present in a Metro style app, regardless of language type. The Manifest Designer has five tabs:

• Application UI. Configure UI settings, including the logo, splash screen, and initial orientation.
• Capabilities. Specify system features or devices that your app can use, such as Internet access, current location, and music library access.
• Declarations. Add declarations for app contracts, like search and share target contracts, and specify their properties.
• Content URIs. Specify URIs that your app either can or can't access.
• Packaging. Set properties that identify and describe your package when it is deployed.

For more info about the app manifest settings, see Manifest Designer.

Double-click the package.appxmanifest file in Solution Explorer, or right-click the file and select View Designer. The Capabilities tab of the Manifest Designer is shown here.

Writing Code

Visual Studio Express 2012 RC for Windows 8 includes full-featured editors for the following languages: JavaScript, HTML/XML/XAML, CSS, C#, Visual Basic, C++, HLSL. The editors provide many language-appropriate features that you can customize to help create your app.

• IntelliSense, which provides features such as statement completion and parameter Help as you type code. The following illustration shows a member list in the C++ Code Editor. Note that the member list also displays a QuickInfo tooltip for the selected item.

  

  Tip  The IntelliSense for JavaScript has been improved in Visual Studio Express 2012 RC for Windows 8, and includes new features such as support for standard JavaScript comments and customized IntelliSense results. For more information about JavaScript IntelliSense, see What's New in Visual Studio 2012 RC and JavaScript IntelliSense.

• Code snippet insertion, available by right-clicking in a code file and selecting Insert Snippet.
• Navigation aids such as Go To Definition, Bookmarks, and Navigate To.

  The Go To Definition command allows you to find the definition of a class or function by right-clicking on the identifier and selecting Go To Definition. (Visual Basic and Visual C++ use the Object Browser to display information about Windows Runtime types.)

  The following illustration shows options such as Go To Definition and Insert Snippet in the JavaScript Code Editor.

  

  To set and use Bookmarks, use the Edit > Bookmarks menu, or use the shortcut keys shown in the Bookmarks menu.

  Open the Navigate To window by pressing Ctrl +, in the editor, or by selecting Edit > Navigate To. Navigate To can find symbol definitions and file names in the solution, but not local variables.

• Outlining, word wrap, displayed line numbers, and other features.

You can customize the behavior of the editors, and enable or disable features like indentation, word wrap, and statement completion. To customize the behavior of the editors, click Tools > Options in Visual Studio, expand Text Editor, and then select the appropriate editor to configure.

Building an app

To build an app, click Build Solution or Rebuild Solution on the Build menu (or press F6). You'll see the results of the build process in the Output window.

To run your new app in debug mode, click Debug > Start Debugging, or press F5. This runs the app in the host computer by default, but you can choose to run on the Simulator or a remote device. For information on selecting a local or remote host, or the Simulator, see Running Metro style apps from Visual Studio.

To get out of the Metro style app and switch back to Visual Studio, press Alt+TAB. To stop debugging, click Debug > Stop Debugging, or press Shift+F5.

Packaging and deployment

The package.appxmanifest XML file enables you to configure a deployment package for Windows Store. The Manifest Designer in Visual Studio provides a user interface for configuring the package. You can access the deployment options in the Manifest Designer by double-clicking the package.appxmanifest file in Solution Explorer and selecting the Packaging tab. For more info, see Manifest Designer.

Localization

To localize a Metro style app in Visual Studio, we recommend that you add one or more resource files to your project, such as a .resjson file for JavaScript. You can use resource files to specify localized values for string resources that you identify in your app. For more info and tutorials related to localizing, see Globalizing your app.

Debugging and testing

Visual Studio includes a powerful debugger with many new features to support debugging Metro style apps. You can debug an app locally, similar to a classic Windows app. You can also debug in the Simulator on the local machine, or you can debug remotely on a tethered device. For general debugging information, see Debugging and testing Metro style apps. For info about debugging a Metro style app written in JavaScript, see Quick Start: Debugging apps (JavaScript) and How to: Inspect CSS rules.

Next Steps

To learn more about creating Metro style apps, see the following topics:

• Create your first Metro style app using JavaScript
• Create your first Metro style app using C# or Visual Basic
• Create your first Metro style app using C++

To learn more about developing Metro style apps using the Visual Studio templates, see these topics:

• JavaScript project templates for Metro style apps

• JavaScript item templates for Metro style apps

• Templates to speed up your app development (C#/VB/C++).

For info about new features in Visual Studio, see What's New in Visual Studio 2012 RC.

Related topics

Product Support and Accessibility

Accessibility in Metro style apps using JavaScript

Accessibility in Metro style apps (VB/C#/C++ and XAML)

Build date: 5/31/2012