The Accelerometer and the Emulator

A Windows Phone Tutorial

The Windows Phone 7.1 SDK (formerly known as Mango) includes a new extended emulator that allows you to see the effect of moving the phone when using the accelerometer. 

We’ll draw a dot in the center of the phone screen, and then move that dot by “tilting” and “rotating” the emulated phone.

To begin, we’ll remove the Application and Page title and change the Layoutroot from a Grid to a Canvas.  Inside the Canvas we’ll draw our dot,

<Canvas
   x:Name="LayoutRoot"
   Background="Transparent">
   <Ellipse
      Name="Dot"
      Fill="Yellow" />
</Canvas>

Notice that the dot has no size; we’ll fix that in the code-behind. 

In MainPage.xaml.cs we’ll declare a couple private membrer variables and a constant; the latter to represent the radius of the dot,

double halfScreenWidth;
double halfScreenHeight;
const double radius = 12;

In the constructor we first set the two member variables by asking the application for the Actual Height (and Width) and dividing by two,

public MainPage()
{
    InitializeComponent();
    halfScreenHeight = 
        Application.Current.Host.Content.ActualHeight / 2;
    halfScreenWidth = 
        Application.Current.Host.Content.ActualWidth / 2;

We then set the height and width for the dot using the constant radius,

 Dot.Height = radius * 2;
 Dot.Width = radius * 2;

With these measurements in place we’re ready to instantiate the Accelerometer,

var acc = new Accelerometer();

The accelerometer has just two events, we want to handle CurrentValueChanged

acc.CurrentValueChanged +=
  new EventHandler<SensorReadingEventArgs<AccelerometerReading>>(
        acc_CurrentValueChanged );

We can now start the Accelerometer,

acc.Start();

Every time the Accelerometer detects a change in orientation, etc., the event fires and we compute the current position of the dot,

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 );
    } );
}

This maps the three dimensional movement of the phone to the two dimensional representation of the location of the dot on the Canvas.  You can see this quite clearly in the new extended emulator.  Run the application and open the emulator. Click on the chevron to the right of the emulator to open the extended emulator. 

With this open, grab the red dot in the center of the emulator and move it around to simulate tilting and rotating the phone. Notice that as you do, the yellow dot you created moves in the x/y (two dimensional) plane to represent the three dimensional movement of the phone, as shown in the illustration at the top of this article.