This article is compatible with the latest version of Silverlight.
This article is Part 1 of “A classic memory game”.
Introduction
My wife has started learning Silverlight and because of my Expression Blend skills are still lacking, we have decided to build the following classic memory game so both of us can learn something new. We kept things simple but we respected basic Silverlight principles. That’s why we used MVVM which might sound an overkill for a simple game but you’ll see that it fits together perfectly.
Nowadays everything revolves around Windows Phone 7 in the Silverlight world and I am not an exception either. Once I got my phone I quickly ported the game over to WP7 to see that with a few modifications it’s running nicely.
In this first article I will go around the game’s concepts, designing the controls and the main game-states. In the second article I’ll finish building the game by adding the necessary code and connecting it with the View. The third part will be about porting the Silverlight game to Windows Phone 7.
First things first, here’s the game itself and download link for the source code.
Step 0. – creating a new MVVM Light project
For the project we have used my personal favorite and probably the most popular lightweight MVVM framework out there: Laurent Bugnion’s MVVM Light toolkit. If you haven’t already installed it, you can do it from here: http://www.galasoft.ch/mvvm/installing/manually/
After installing and copying the Blend template in its place, two new ‘New Project’ templates should appear in the Silverlight department:
Of course you can add the MVVM Light toolkit bits later to the project as well, but it is very nice to have a template for an easy start. It’s also important to note that the MVVM Light toolkit is available for Silverlight 3, Silverlight 4, WPF3.5, WPF4 and Windows Phone 7.
Creating a custom ToggleButton Style – the Card
After drawing the different cards, the back of the cards, and saving them as images, our first step was to create a custom control for the cards.
In Blend put a Grid in the LayoutRoot and put two Images inside this Grid. One will represent the back of the card, the other will be the front. Right click on the Grid and choose Make into Control..
In the upcoming panel find the ToggleButton control and add the name CardToggleButtonStyle. Select a separate resource file (you may have to create a new one) to define the style in to keep the MainPage.xaml clean.
Delete the ContentPresenter, so you will end up something like this:
Notice the States panel, especially the CheckStates state-group. Every ToggleButton has a checked and unchecked state and we will use these two states to switch between our card’s front and back. So select the Unchecked state and change the front image’s Visibility to Collapsed. Then select the Checked state and do the same with the back image.
Now if you run the application you should be able to switch between the back and front of the card by clicking on it. Let’s add the turning-animation to the switching to make it look better!
Select the Unchecked state and add a transition to Checked state (1). A good length for the animation is 0.3 secs (2). By selecting the newly created transition we can edit its animation. Forward to 0.2 sec in the timeline, select the front image (3) and click the Record Keyframe button (4). Do this for the back image too (3,4). Set up a 90 degrees Y rotation in the Projection panel for the front image, and a –90 for the back (5). (Don’t worry when Blend automatically overrides the 90 degrees to 89...) Change the Visibility of the images, the front was Collapsed, change it to Visible. The back was Visible, change it to Collapsed (6). Now forward to the 0.3 sec mark and change the front images Y rotation to 0 (7). Now when you press the play button, you should see the card turning from one side to the other.
You’ll have to create the opposite of this animation in the Checked->Unchecked transition.
The cards will be flipped back when a certain time elapsed or a third card is about to turn. That means the logic is responsible for this task not the player. So in the Checked state set the IsHitTestVisible to false. At first I didn’t do this and had this bug where the user could turn back and forth a card without the MoveCounter increasing.
Designing the layout – Creating a WrapListBox
So we have the card control, now we need to place them. The memory game shouts for a WrapPanel, you’ll find that in the Silverlight toolkit. But we wanted a more dynamic solution, having different number of cards for each difficulty. That’s why we used a WrapListBox, a ListBox with WrapPanel’s layout. Here’s how to do it:
Drop a ListBox in the Layout Grid, right click on it and choose Edit Additional Templates –> Edit Layout of Items (ItemsPanel) –> Create Empty..
Give it a name (WrapItemsTemplate) and again place the template in the separate resource dictionary to keep the main xaml clean. The ItemsPanel is responsible for the layout of the ListBox’s items. Here you can override the ListBox’s default layout (which is a StackPanel) and do anything you want. Just check out Bea Stollnitz’s famous solar system example.
We’ll need only a simple WrapPanel now. Delete the default StackPanel and replace it with the WrapPanel (you’ll need the Silverlight toolkit).
Trying it by placing a few Cards inside you’ll see that it doesn’t do exactly what we wanted. The problem is the ScrollViewer.
The quickest solution is to remove it from the ListBox’s template (we wouldn’t want the user to scroll for flipping cards).
Right click on the ListBox, select Edit Template and Edit a Copy.. After giving it a name (MemoryListBoxStyle) and placing it in the separate resource dictionary, move up the ItemsPresenter into the Grid, and delete the unneeded parts: the Border, the ScrollViewer and the ValidationErrorElement. The ItemsPresenter defines where the ItemsPanel (that’s our WrapPanel) is added inside the ListBox template. So we will need just that.
Much better:
Designing the layout – Menu and VisualStates
The game has three main stages: choosing a difficulty (start), playing, score (end). VisualStates are useful not just in (Custom) Control level, but in UserControl level as well. I’ve added three VisualStates to the LayoutRoot after building the menu items.
All the menus are Grids with a rounded Rectangle inside them. The Buttons use a custom style containing a rounded Rectangle and the ContentPresenter.
The template of the RadioButtons are the ContentPresenter and two Rectangles. One Rectangle behaves as a highlight border, because it doesn’t fill and is visible only when in Checked state.
For the states first we need to add a VisualStateGroup, select the LayoutRoot, switch to the States panel, and add a VisualStateGroup. Now we can add our three states and of course we won’t miss adding transitions as well. The result looks like this:
Note that you can add Easing to transitions (highlighted too) to make a more realistic animation. For example in my case I have an ElasticInOut Easing on the MenuState –> GameState transition.
Switching States using the GoToStateAction behavior
A great and straightforward way to change between states is the GoToStateAction behavior. With this behavior we can easily set up the initial state, the GameState, and the switching from EndState to MenuState. What we can’t do with it, is the switch from GameState to EndState because it’s not trivial, it’s decided by the game logic. So let’s do the trivial ones:
Switch to the Assets panel and find the GoToStateAction behavior in the Behaviors. Put the behavior inside the LayoutRoot and select Loaded for EventName and MenuState for State. Don’t forget to check the UseTransitions box.
To switch from MenuState to GameState place another GoToStateAction behavior inside the start button, EventName is Click, StateName is GameState. Put the final behavior inside the new game button to make the switch from EndState to MenuState again (StateName is MenuState).
Summary
In this article we started designing a game, our main tool was Expression Blend. We’ve created a custom control for the Cards, a WrapListBox for laying out them, and we set up the three main states of the game. All of these parts are real, working elements.
In the next part we will put some logic behind the game and connect it with the View, using converters, the CallDatacontextMethodAction behavior and others. We will again rely heavily on Blend.
About the Author
My name is Levente Mihaly. I've entered the .NET world in 2006, and after graduating at Budapest University of Technology (Msc in Computer Science) I started working as a .NET software developer. After meeting technologies like WinForms and ASP.NET, Silverlight quickly became my favourite platform from the early Silverlight 2 beta stages. I was always interested in mobile development and now I'm very happy since with Windows Phone 7 I can easily expand my knowledge to the mobile world. Nowadays beside following Silverlight I'm focusing on WP7 in my free time. I'm also the runner-up of the 2010 Silverlight ecoContest. You can reach me on twitter (@leventemihaly).