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
    };
else
  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.Parse(_currentCard.GetValue(Grid.ColumnProperty)
     .ToString());
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.

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

I was trying to make a mockup in Balsamiq for a windows phone 7 series application and thought i needed a few items to get things right. So I started creating the parts needed. The basic phone, with a see through-screen so it's easy to create panoramas to lay behind. The keyboard variants (there are quite a few, default, text, email, web, search and a couple of dialer keyboards) and then a few of the buttons and checkboxes that’s needed. Most buttons are easiest mimicked by using the geometric shape in Balsamiq.

It’s quite heavy with all the details in the keyboards so pick and choose only the controls you need.

So there you are, just download and start using it.