triggering windows phone 7 animations with mvvm light

Screenshot of Windows Phone 7 application.

Simple is a good thing when you're learning a new technique.

I’m in the process of learning how to apply the MVVM design pattern in my Windows Phone 7 development, but for some reason it’s hard to find simple, working examples that illustrate specific tasks. Most of the blog posts I’ve come across are either highly theoretical, outdated (relying on the CTP version of the WP7 development tools, for example) or too complicated for an MVVM beginner to grasp. Maybe I’m feeble minded, but an MVVM “beginner tutorial” that packages UIs for Windows Phone 7, WPF and Silverlight into a single Visual Studio solution along with separate data access and business logic projects doesn’t help me learn MVVM. It just makes my brain hurt. I just want to know how to make this button click do something useful in my viewmodel.

To that end, this example does just one thing: When you click the Start button, a white circle animates from left to right. Here’s what’s happening behind the scenes:

  • The Start button is bound to a command in the viewmodel.
  • When the command is triggered in the viewmodel, it broadcasts a message, which is really just an object that you define.
  • The codebehind page, which has been listening for the message, starts the animation.

If this seems like extra work, it is. So why not just start the animation from a click event in the codebehind and be done with it? The benefit becomes more obvious later when you add complexity to your app. The message that starts your animation could be used to trigger events in other areas of your application when you want several things to happen simultaneously. You can also write unit tests that validate that your “start animation” message is sent in response to the correct event.

The code download requires Laurent Bugnion’s MVVM Light Toolkit, and I have included the toolkit DLLs in the project. It uses the fall 2010 RTM version of the Windows Phone 7 Developer Tools. I have removed a lot of the stock code that is included in the default MVVM Light template to clarify which code is essential to the example.

Download Example Code

Comments and constructive criticism are welcomed.


Leave a comment

Filed under MVVM, Windows Phone 7

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s