The Accelerometer and the Emulator

A Windows Phone Tutorial

The Windows Phone 7.1 SDK (formerly known as Mango) includes a new extended AccelerometerMovement 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 OpeningTheExtendedEmulator 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Mango, Mini-Tutorial, WindowsPhone and tagged . Bookmark the permalink.

5 Responses to The Accelerometer and the Emulator

  1. jackie says:

    I am a beginner to learn window phone.
    Could i get your help when i meet some problems?

  2. Amit says:

    Error 1 Cannot convert lambda expression to type ‘System.Delegate’ because it is not a delegate type
    Help me resolve this 🙁

    • jValmor says:

      Try this steps:

      1-Add these references:
      Microsoft.Devices.Sensors
      Microsoft.Xna.Framework

      2- In MainPage.xaml.cs add this:
      using Microsoft.Devices.Sensors;

      3- Change the code to this:
      void acc_CurrentValueChanged(object sender, SensorReadingEventArgs e)
      {
      Dispatcher.BeginInvoke(new Action(() =>
      {
      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);
      }));
      }

      I hope this help you.

  3. Pingback: WindowsDevNews.com

  4. Jone says:

    i’m speak english a litel;the now,i’m to learn .Net,i need your help!may i become your friend?

Leave a Reply

Your email address will not be published.