Explaining the Windows Phone Mango emulator

Explaining the Windows Phone Mango emulator

Windows Phone Mango emulator has some cool new features. I will describe those features and give an example that can help you understand how it works and how can you use it in your application. The cool new features are Accelerometer, which enables you to simulate the acceleration of your emulator, Location, which helps you emulate GPS coordinates, and Screenshot, which makes it easier to take a screenshot of your application.

First of all, start by creating a new Windows Phone Mango project in Visual Studio 2010. Single page this time. Create a simple user interface – place two buttons:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
    <StackPanel>
        <Button Content="Accelerometer" Name="Button1" Click="Button1_Click" />
        <Button Content="Location" Click="Button_Click" />
        <Grid Name="Acc" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition />
           </Grid.ColumnDefinitions>
           <TextBlock Text="x:" Grid.Row="0" Grid.Column="0" Margin="8" FontSize="28"/>
           <TextBlock Text="y:" Grid.Row="1" Grid.Column="0" Margin="8" FontSize="28"/>
           <TextBlock Text="z:" Grid.Row="2" Grid.Column="0" Margin="8" FontSize="28"/>
           <TextBlock Name="xVal" Grid.Row="0" Grid.Column="1" Margin="8" FontSize="28"/>
           <TextBlock Name="yVal" Grid.Row="1" Grid.Column="1" Margin="8" FontSize="28"/>
           <TextBlock Name="zVal" Grid.Row="2" Grid.Column="1" Margin="8" FontSize="28"/>
       </Grid>
       <Grid Name="Geo" Visibility="Collapsed">
          <my:Map Name="map" CredentialsProvider="your bing map credentials" Mode="Road" Height="400"/>
       </Grid>
   </StackPanel>
</Grid>  

As you see, there is a simple content Grid with two buttons and two hidden child Grids. One for Accelerometer, and the other for the Location demo. In order to be able to use the Map in your own projects, you need to go to Bing Maps Portal and use your Windows Live ID to sign in and create your own key. Once you have it, copy paste it in the CredentialsProvider property of Map control.

Accelerometer

In the MainPage.xaml.cs, add Accelerometer class. In order to do that, you need to add the following references to your projects:

using Microsoft.Devices.Sensors;  

Handle the click event of the first Button, like this:

    Accelerometer acc;
    private void Button1_Click(object sender, RoutedEventArgs e)
    {
        if (Acc.Visibility == System.Windows.Visibility.Collapsed)
        {
            if (acc == null)
           {
                acc = new Accelerometer();
                acc.TimeBetweenUpdates = TimeSpan.FromMilliseconds(40);
               acc.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<AccelerometerReading>>(acc_CurrentValueChanged);

           }
           acc.Start();
           if (geo != null) geo.Stop();
           Geo.Visibility = System.Windows.Visibility.Collapsed;
           Acc.Visibility = System.Windows.Visibility.Visible;
       }
   }

   void acc_CurrentValueChanged(object sender, SensorReadingEventArgs<AccelerometerReading> e)
   {
       Dispatcher.BeginInvoke(() =>
           {
              xVal.Text = e.SensorReading.Acceleration.X.ToString();
               yVal.Text = e.SensorReading.Acceleration.Y.ToString();
               zVal.Text = e.SensorReading.Acceleration.Z.ToString();
           });
   }

You simply display the Sensor reading – x, y and z values. In order to emulate those values, you need to use the first cool emulator feature. But we will do that later. Now, add the code for Location emulation.

Location

Add the click event handler for the second, Location button:

private void Button_Click(object sender, RoutedEventArgs e)  
{
    if (Geo.Visibility == System.Windows.Visibility.Collapsed)
    {
        if (geo == null)
        {
            geo = new GeoCoordinateWatcher(GeoPositionAccuracy.High);
            geo.MovementThreshold = 40;
            geo.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(geo_PositionChanged);
       }
       geo.Start();
      if (acc != null) acc.Stop();
       Acc.Visibility = System.Windows.Visibility.Collapsed;
       Geo.Visibility = System.Windows.Visibility.Visible;
   }
}

void geo_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)  
{
   GeoCoordinate coord = new GeoCoordinate(e.Position.Location.Latitude, e.Position.Location.Longitude);
   map.Center = coord;   
}

Here we simply center the Bing maps control to the current GPS readings on the device, or emulator.

Testing the emulator

Run the application. Click on the Accelerometer button. Open the additional tools:

image

You should see something like this:

image

I circled a few things for you, and draw a few arrows, to make it more simple. First of all, check out the menu on top – you have three tabs – Accelerometer, Location and Screenshot. I enumerated 3 things:

  1. Orange dot
  2. Play button
  3. Orientation

Now, why did I enumerate those? You use the Orange dot to emulate the device acceleration. In other words, just move it around. When you do that, the x,y and z values change accordingly. When you press the play button, you can use the shake recorded data – emulated device shake. You have four possible starting orientations:

image

You use those to test all the possible orientations and accelerations. Feel free to change those and move the orange dot to see how it reflects in the demo application!

Now, the Location emulation. This is what you should see when you press the Location button in the demo application, and when you select the Location tab in the emulator tools:

image

A short explanation – in the application window, you get the Bing map control. In the additional tools, you also get the map. But you can select a location anywhere in the world and place pins in order to emulate the location change and the current position of the device (emulator). I will do that using the Croatian map – I put 8 pins in Croatia and fire the change every 4 seconds:

image

Press the Play button next to the “Fire every 4 s” part. You will notice that it will seem like you are changing your location in Croatia every four seconds. As it changes, the Map in the demo application is changing it’s centre location. Zoom in and out of the Map in the demo application to see the changes! You can also save the data and use it later as the recorded data! It creates a simple xml file.

Now, the Screenshot feature. It isn’t much of a breakthrough, but it makes the process of taking app screenshots much easier. Everyone used the snipping tool before, and everyone also can’t wait for the feature of taking the screenshot inside the application on the real devices, but for now, this is the best way to go. Simply press the Capture button and make sure you are using the 100% emulator size to get the best image. After you capture the screenshot, save it wherever you want.

image

OK, so those were the features of the latest Windows Phone emulator. I assume that the next versions will bring the emulation of other sensor data, like compass perhaps.

If you have any questions, leave them in the comments sections, and if you find the article helpful, make sure the others know about it, too. :)

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#