HTML  /  Tutorial

Blend Tutorial Part 9: Build and Run Your App—Memory Game

This tutorial provides a walkthrough for building and running your app.

About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions—Memory Game
Blend Tutorial Part 9: Build and Run Your App — Memory Game [This post.]

Build and run your app

Microsoft Expression Blend 5 for Windows Developer Preview lets you preview your app on your local machine and on a simulator. The advantage of previewing on the local machine is that your app will run more quickly. If you need to test display rotation, different display resolutions, and suitability for touch input, previewing on the simulator provides you with these advantages without having to deploy to one or more physical devices.

To build and run the app

  1. In the Platform panel, choose a target device where the app will be deployed. You can deploy to the following targets:
    • Local Machine Deploys to the local computer. This is the default setting.
    • Simulator Deploys to a simulated device that uses the dimensions specified in the Display setting of the Platform panel.
  2. In the Project menu, click Build Project or press Ctrl + Shift + B. A Build succeeded message displays briefly above the artboard controls.
  3. In the Project menu, click Run Project or press F5. The app displays in full screen mode.

Note: Press ALT + F4 to close the app window.

Simulator options

The Simulator target can emulate a touch-screen device with the following options:

  • Mouse mode The mouse pointer behaves like a traditional mouse pointer.
  • Touch emulation The mouse pointer changes to emulate touch interaction.
  • Touch emulation pinch-zoom The mouse pointer changes to emulate a pinch-zoom motion. The touch emulation pinch-zoom interaction is controlled by the mouse wheel.
  • Touch emulation rotate The mouse pointer changes to emulate a rotation motion. The Touch emulation rotate emulations is controlled by the mouse wheel.
  • Rotate simulator to the right The simulator is rotated 90 degrees to the right.
  • Rotate simulator to the left The simulator is rotated 90 degrees to the left.
  • Change resolution The simulator is changed to the resolution you select from a list.

Future installments

You now have a fully functioning app that you can save and distribute. However, there are additional modifications that we can make to the app to make your app even more professional in appearance and enhance usability. These enhancements will be featured in future installments of this tutorial.

Upcoming topics will show you how to:

  • Add a logo
  • Change the game size
  • Switch Views
  • Create a pop view
  • Work with list selectors

Additional resources

The Windows Dev Center includes many resources for planning, building, and distributing your apps. For more information about developing Metro style apps, see the following:

Tip: You may have to clear the Search box to view all of the categories in the CSS Properties panel.