Designing a Microsoft Silverlight Powered Cannon for Windows Phone 7 Series

By: Peter VanRysdam, Chief Marketing Officer at 352 Media Group, shares his experience developing for Windows Phone 7 Series using the Silverlight platform.

Earlier this month, thousands of MIX10 attendees, and countless more who watched online, got a firsthand look at the new application development platform and tools for creating compelling applications on Windows Phone 7 Series, using Silverlight and the XNA Framework. MIX10 attendees got a little more than they expected when Scott Guthrie’s Day 1 keynote closed with a Smartphone remote-controlled t-shirt cannon rolling on stage. The cannon, driven by a Windows Phone 7 Series application built on the Silverlight platform, shot Scott’s iconic red polo shirts into the audience. Check out the keynote at https://www.microsoft.com/presspass/events/MIX.

At 352 Media Group, a Web design company and developer of Silverlight applications, we created the user interface for the app. In doing so, we unknowingly helped prove just how easy the application development process is for the Windows Phone 7 Series. Believe it or not, our developers had no idea the app they’d written was for the phone until just a few hours before the MIX10 Day 1 keynote!

The Microsoft Coding4Fun.com team asked 352 Media Group to write an app in Silverlight that would fit in an 800 by 400 pixel area. Coding4Fun.com was creating the application code and wireframes, while we were building the front-end user experience. We didn’t see the actual code they were developing, but knew they would be using some standard controls. We decided to skin them, making it that much easier to integrate our design into their code. For example, the accelerator pedal we designed is simply a button with a delay to mimic the look of a standard pedal. The toggle for forward and reverse is a basic slider, as seen on the drive screen below.

clip_image002_thumb

When all was said and done, we designed the graphics for the icons and the main screens, and created the XAML code for the transitions, buttons, and rollover states. The final code integrated seamlessly with the backend application used to control the cannon. It is a testament to how easy it is for a Silverlight developer to transition to a Windows Phone developer. All the tools are the same, and all your experience in Silverlight development translates directly to mobile device development.

One of the most interesting features of the app was the use of the Windows Phone 7’s accelerometer to control the cannon’s pan and tilt functions. The screenshots below show before and after shots of the aiming screen, which pulled in real data about the phone’s position.

Before:clip_image004_thumb

 

After: clip_image006_thumb

If you want to try it out for yourself, the code for the cannon app, including the user interface, is available for download from Coding4Fun.com’s blog at https://blogs.msdn.com/coding4fun/archive/2010/03/16/9979874.aspx.

Original Post Comment Archive.pdf