Using MVVMLight, ItemsControl, Blend and behaviors to make a ‘heads up compass’ - Init

<body> <h1>Using MVVMLight, ItemsControl, Blend and behaviors to make a ‘heads up compass’</h1> <p><a href="http://feedads.g.doubleclick.net/~a/txbjZ9N_GBTXJ7qTFX20PBBPmnQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/txbjZ9N_GBTXJ7qTFX20PBBPmnQ/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/txbjZ9N_GBTXJ7qTFX20PBBPmnQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/txbjZ9N_GBTXJ7qTFX20PBBPmnQ/1/di" border="0" ismap="true"></img></a></p><p>When I talk of the MVVM pattern, people usually think of business objects that get wrapped by ViewModels which get data bound to a user interface. Usually this is something like a list of people, news, items that can be purchased, whatever – and usually this data is displayed in a list box, with a bit of templating if it isn’t too much trouble. That’s fine in itself and good way to use my favorite pattern but there are more things possible using MVVM data binding than most people imagine. The most fun way I have been able to discover is to combine <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(v=VS.95).aspx" target="_blank">ItemsControl</a> and behaviors. This is what drives my game <a href="http://www.windowsphone.com/en-US/apps/48fd8097-f07e-e011-986b-78e7d1fa76f8" target="_blank">Catch’em Birds</a>. And this article shows how to use this technique make a kind of heads up compass. I’ll sprinkle some ‘how to do things in Blend’ (like adding and configuring behaviors) throughout the article as well.</p> <p>For the hasty readers: “Setting the stage”, “Building the models” and “Building the ViewModel” is the ground work. The real stuff starts at “<a href="#IntialUserInterface">Initial user interface</a>”.</p> <p><font size="4">Setting the stage</font></p> <ul> <li>Create a new <a href="http://www.microsoft.com/windowsphone/" target="_blank">Windows Phone 7</a> application. Let’s call it “HeadsUpCompass”. Select Windows Phone 7.1 - duh ;). <li>Install my <a href="http://wp7nl.codeplex.com/" target="_blank">wp7nl library from codeplex</a> via NuGet. This will get you some of my stuff and MVVMLight and some more stuff as well in one go. <li>Add references to Microsoft.Device.Sensors and Microsoft.Xna.Framework.</li></ul> <p><font size="4">Building the models</font></p> <p>The application has two models: CompassDirectionModel – holding stuff that wants to be displayed, and CompassModel, that checks the compass direction using the motion API. The CompassModel is implemented below. I’ve explained <a href="http://dotnetbyexample.blogspot.com/2011/10/using-motion-api-to-check-what.html" target="_blank">using the Motion API to check where the camera is looking</a> in an earlier post so I’ll skip the details here. It’s basically the same functionality, wrapped in a model, with an event firing at the end:</p><pre>using System; using System.Windows; using Microsoft.Devices.Sensors; using Microsoft.Xna.Framework; namespace HeadsUpCompass.Models { public class CompassModel { Motion motion; /// <summary> /// Inits this instance. /// </summary> public void Init() { // Check to see if the Motion API is supported on the device. if (!Motion.IsSupported) { MessageBox.Show("the Motion API is not supported on this device."); return; } // If the Motion object is null, initialize it and add a CurrentValueChanged // event handler. if (motion == null) { motion = new Motion {TimeBetweenUpdates = TimeSpan.FromMilliseconds(250)}; motion.CurrentValueChanged += MotionCurrentValueChanged; } // Try to start the Motion API. try { motion.Start(); } catch (Exception) { MessageBox.Show("unable to start the Motion API."); } } /// <summary> /// Stops this instance. /// </summary> public void Stop() { motion.Stop(); motion.CurrentValueChanged -= MotionCurrentValueChanged; } /// <summar </body>