Design your first Windows Store app (XAML)

  • Article

This tutorial will help you get started with the most basic XAML design tasks in Blend for Visual Studio 2012. When you complete this tutorial, you will not only be more familiar with tasks that are easier in Blend (for example, data binding, animations, template editing, or using project templates); you will also have created a lightweight, dynamic version of the memory game commonly referred to as "Concentration."

Memory game project

To work through the tutorial, download the XAML Memory game project files from the Windows Store Apps samples gallery. This project is the starting point for following this tutorial, and includes all of the files, including all of the images, necessary to create the app.

Important

Download the Memory source files from here.

After you download the Memory game sample files, extract the files to a location on your computer, for example, \My Documents\Visual Studio 2012\Projects\. After the files are extracted, you are ready to start the project.

Create a new project

  1. On the File menu, click New Project.

    Tip

    You can also create a new project on the Welcome screen by clicking New Project.

    The New Project dialog box opens.

    New project

  2. In the New Project dialog box, in the Project types group, select XAML (Windows Store), and then select Blank App (XAML) in the project templates window.

  3. In the Name box, type Memory.

  4. In the Location field, verify that the default project location path is correct.

  5. In the Language box, select Visual C#.

    Note

    Visual C# is the default language. Other options include C++ and Visual Basic.

  6. Click OK.

JJ129462.collapse_all(en-us,VS.110).gifThe project folder

If you look in the Projects panel, you can see the default files and folders that are automatically generated when you create a new Windows Store project using XAML.

Projects panel

  • References   Includes project references files, including software development kit (SDK) references. These files are read-only.

  • Assets   Includes pre-defined image assets for your app.

  • Common   A resource dictionary that contains common XAML styles.

    Warning

    We recommend that you do not remove, rename, or modify these files in the Common folder. Modifying these files may result in a project that will not build. If you do find it necessary to modify these files, we recommend that you make a copy of the original file and then modify the copy.

  • Properties   Contains general assembly information.

  • App.xaml   Declares shared resources and handles global application-level events. App.xaml is required to display the user interface.

  • MainPage.xaml   This is the default start page of your app.

  • package.appxmanifest   Contains application settings including deployment properties.

JJ129462.collapse_all(en-us,VS.110).gifDeveloper notes

In addition to the project files, the developer also handed off Developer notes (XAML), with details about the code and suggestions about how to style elements of the game.

Tip

It's a good idea to save your project from time to time as you progress. To save the current document, on the File menu, click Save, or press Ctrl+S.

If multiple files have changed, you can save all of the changes by clicking Save All on the File menu, or pressing Shift+Ctrl+S.

An asterisk on the document tab indicates that a file has changed. If multiple files have changed, an asterisk will appear on each of the tabs.

The next step: Add the project resources.