Windows Phone 7 planning poker game application


Update 2: Now using the RTM SDK!
Update: Now using the new beta of the windows phone SDK!

I was trying out a few things on the windows phone 7 platform and wanted to come up with a simple application idea. There are numerous of simple list application examples out there like twitter and RSS readers but I wanted to try something different, something both useful and a bit more playful. And with a limited time.

So why not a planning poker application? Most of the graphics was already there like the coffee cup, infinity mark and the logo so it was simple to whip it together. But I still think there are a few interesting parts in this.

As it’s static data, there are no more than the numbers, coffee cup, question mark and the infinity sign.  I didn’t bother with any complicated view model, just went along with static buttons. And one big button as the currently selected card. I re-styled the button to make it look like a card and added the graphics and text. The big card is normally hidden but when I select a card it is populated with the selected cards content and the popped up.

The trick here is that if the selected card is an Image the I create a new image and assign it to the content and if its text I assign that directly to the content.

if (_currentCard.Content is Image)
  BigButton.Content = new Image
      Source = ((Image)_currentCard.Content).Source,
      Height = 234,
      Width = 202
  BigButton.Content = _currentCard.Content;

Next up is the animation. I wanted the card to flip over while I tuned up the dark overlay. The basic animation was easy to set, I just used a combination of scale and plane transforms to get the big card from the small size and up to the full screen view with a flip. It was a bit trickier to get the card to start and end the animation on the right spot. A little calculation together with naming of the places where I should modify the animation, with  an “x:Name” property, did the trick. Now I was able to modify it from code using the following to set the position:

int xValue = -180 + 120 *
int yValue = -260 + 190 *
    (int.Parse(_currentCard.GetValue(Grid.RowProperty).ToString()) - 1);

((EasingDoubleKeyFrame)FindName("startX")).Value = xValue;
((SplineDoubleKeyFrame)FindName("endX")).Value = xValue;
((EasingDoubleKeyFrame)FindName("startY")).Value = yValue;
((SplineDoubleKeyFrame)FindName("endY")).Value = yValue;

It’s not the most elegant code, with no safeguards when I cast between stuff, but I whipped it together during an afternoon and it was rewarding to see what could be accomplished with some 50 lines of code and a little blend. And who knows I might clean it up and publish it as soon as the devices are out and the market place is up.

Updated: Since the new beta of the developer tools came out a couple of days ago I updated the planning poker application. Most of the updates consist of exchanging 3-4 assembly references with one; Microsoft.Phone. And the the emulator turned out to quite a bit speedier, woohoo!

Updated 2: With the RTM release of the SDK, some more updates had to be made. Manifest validation has now been turned on, and some stuff in the manifest changed.

Final app here:

Description of how to transform a beta app to an RTM compliant app:

Time to plan the next sprint // Håkan Reis

Leave a Reply