I must admit I was reluctant to get into Windows Phone development too deeply because I had no actual device running the Windows Phone OS. An emulator, no matter how good, cannot replace the actual device experience, and for some applications such as games, is simply inadequate.
Well, the excuses are over. I got a Windows Phone device (the Samsung Omnia 7) a few days ago. It’s time to take WP7 development more seriously (but not too seriously, as it’s fun…).
Instead of going with the traditional “hello world”, I’ll go for something a little more ambitious: a kind of guessing game, with the following rules:
- the program selects a 4 digit number, where all digits being different from one another.
- the player tries to guess the 4 digit number
- for each guess, the program responds with a set of full or empty circles. A full circle indicates a correct digit in the correct place (but it doesn’t indicate which one). An empty circle indicates a correct digit that’s out of place.
- this goes on until the player figures it out or the time runs out.
Let’s get started.
Getting the Tools
The first thing to do is download the Windows Phone 7 SDK, in the Beta 2 version of “Mango” at the time of this writing. This installs project templates for Visual Studio, the WP7 emulator and some other useful libraries. You’re naturally going to need some version of Visual Studio 2010 (the express version works as well).
Creating a New Project
After installation, run VS 2010 and create a new project for a Silverlight windows Phone application:
There are various templates to get started, but they’re pretty similar, each one adding something beyond the first template. For this project, I’ll use the basic “Windows Phone Application” template, call it GuessNumber and click OK.
Windows Phone supports two pretty distinct way of programming (although they may also be combined): one is using Silverlight and the other using XNA. Both of these technologies are not new, meaning possibly a less steep curve of learning. If you know Silverlight or WPF, then you’re on a good start with WP7 application development. For more graphical games – XNA is the better choice. And again, If you know XNA for Windows or the XBOX 360, you’re mostly ready to tackle WP7. For a good tutorial on basic XNA development, you can check out the tutorial series I did a few months back (here are the first and last posts in the series).
Coding the game
We get a standard WP7 page deriving from the PhoneApplicationPage (similar somewhat to the standard Silverlight Page class). Inside there is some standard XAML that we need to customize. This is the basic screen I want to get:
The main area holds an ItemsControl wrapped in a ScrollViewer that’s going to show the guesses and their results as they come in during play. The “New Game” button starts a new game (obviously), “Restart” resets the clock but keeps the same secret number (a kind of cheat). “Quit Now” forfeits the game and shows the secret combination. Here’s an example of a game running inside the emulator:
A class named GuessNumberGame takes care of the game logic: generating a secret number and evaluating guesses. Here’s the way a new number is generated:
The general strategy is creating a range of numbers 0-9, then shuffling them and finally using the first NumLength digits (currently 4, but can be changed to create an easier or more difficult game).
To evaluate a guess, the EvalGuess method is used:
The method returns true on a correct guess. inpos returns the number of digits in correct positions and justin returns the number of digits in incorrect positions.
The MainPage class holds a game instance and handles the UI. I have not created any special MVVM style views or view models in this application as it’s too simple to bother. Some data binding does take place, however. The ItemsControl control is built like so:
There is a data template based around a simple GuessItem class serving as the DataContext of a user control that shows a single row consisting of a guess and its evaluation. The ItemsSource property is bound to a Guesses property, but since no source is indicated, it uses the closest DataContext. In our case, it’s simply set to the MainPage itself (in the constructor). Guesses is an ObservableCollection of GuessItem instances.
Here’s how a GuessItem looks like:
The GuessItemControl class is a user control that builds a line using a combination of code and markup:
The circles are built dynamically using code. This may not be the most “elegant” way of doing it, but it works and suffices for our purposes here.
Evaluating a guess is handled by the Click event handler of the “Guess” button:
The game’s EvalGuess method is consulted, and then a GuessItem object is constructed based on the results and added to the ObservableCollection that is bound to the ItemsControl, so that the results appear immediately.
Running & Debugging the Application
The installed tools allow selecting the target device that we want to deploy to. This is the emulator by default, but we can switch to the actual device (now that I have it…).
Debugging is pretty straightforward. You can set breakpoints, inspect variables, etc. whether you’re running on the emulator or the actual device. If running on the device, your app is added to the all applications list and you can run it independently like any other.
If you want to put your creation to the marketplace, you’ll need to tackle a few more details, but that’s for another post.
Other Points of Interest
The TextBox used is just a textbox, but on a phone device the SIP keyboard appears. It’s possible to indicate to WP7 which keyboard style you prefer. In this case, we just need digits, so using the “default” keyboard is inconvenient, causing the player to type way too much and be annoyed. Here’s how we can choose a different set:
The countdown is handled by a DispatcherTimer object, firing at 1 second intervals. It’s activated when a new game starts:
It’s configured in the constructor of MainPage. First, some fields:
Next, handling the Tick event:
Here’s a link to the entire Solution.