Mango brings a new extended emulator with emulation of the accelerometer. This allows you to test applications that use the accelerometer within the emulator before doing your final testing on the device. (Previously you had to pick up your entire desktop computer and twist it back and forth, now you can leave it safely on your desk).
To see this at work, we’ll create a new Windows application with a dot that we’ll “move” around the page based on tilting and twisting the emulated phone.
To do so, create a new Windows Phone application and clear out the contents of LayoutRoot in MainPage.xaml and change it from a Grid to a Canvas. Add an Ellipse with both the height and width set to 25 (making a circle) and with the fill set to your favorite color,
<Canvas x:Name="LayoutRoot" Background="Transparent"> <Ellipse Name="Dot" Width="25" Height="25" Fill="Red" /> </Canvas>
Let’s now write the code to move the dot around on the page. Start by adding a reference to Microsoft.Devices.Sensors and to Microsoft.XNA.Framework (remember with Mango you can combine Silverlight and XNA and we’ll be using a property from the XNA framework).
Next, open MainPage.xaml.cs and set up three member variables that will help simplify the computations,
public partial class MainPage : PhoneApplicationPage { double halfScreenWidth; double halfScreenHeight; const double radius = 12; public MainPage() { InitializeComponent(); halfScreenHeight = Application.Current.Host.Content.ActualHeight / 2; halfScreenWidth = Application.Current.Host.Content.ActualWidth / 2; Dot.Height = radius * 2; Dot.Width = radius * 2; } }
You can see that we’re using the member variables to size and center the dot. Still within the constructor, declare an instance of Accelerometer, set up its ValueChanged event and start the accelerometer,
var acc = new Accelerometer(); acc.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<AccelerometerReading>>( acc_CurrentValueChanged ); acc.Start();
Allow Visual Studio to set up your event handler for you and within that event handler you’ll implement code to move the dot. Because the accelerometer’s actions take place on a background thread, remember to marshall the UI work using the Dispatcher,
void acc_CurrentValueChanged( object sender, SensorReadingEventArgs<AccelerometerReading> e ) { Dispatcher.BeginInvoke( () => { } ); }
All that’s left is to fill in the delegate that you’ve created within the Dispatcher. It is here that we’ll respond to the changed values from the accelerometer by repositioning the dot. Here is where we use the XNA Framework, as shown in the illustration.
With the x value of the Acceleration in hand, we can add one, and subtract the radius of our dot. We then do the same thing to compute the new height.
Finally, we want to position the dot using the xPos and the yPos values we just computed. We do that by calling the canvas, passing in the dot and the new absolute position.
void acc_CurrentValueChanged( object sender, SensorReadingEventArgs<AccelerometerReading> e ) { Dispatcher.BeginInvoke( () => { double xPos = halfScreenWidth * (e.SensorReading.Acceleration.X + 1) - radius; double yPos = halfScreenWidth * (e.SensorReading.Acceleration.Z + 1) - radius; Canvas.SetLeft( Dot, xPos ); Canvas.SetTop( Dot, yPos ); } ); }
Start the emulator. Notice that the controls to the right of the emulator now have a chevron. Clicking on the chevron brings up the extension to the emulator, which includes the new accelerometer emulation. Click and drag on the dot in this emulator and you will see an emulation of moving and rotating the phone while your dot responds to the new acceleration.