Using Windows Phone 7 Technologies : Retrieving Accelerometer Data (part 1)

You will begin by building a simple application that captures the accelerometer data. The accelerometer data consist of acceleration data in x, y, z directions and time in which the acceleration data was captured. Figure 1 displays the basic UI of the accelerometer data captured. In order for this demo to work, you must deploy the project to an actual Windows Phone device. If you do not have a Windows Phone device, you might consider using Reactive Extension to simulate the accelerometer behavior.

Figure 1. CaptureAccelerometerData demo

You will build the demo in three steps. First, you'll need to create a Visual Studio project. Next you will build the project's user interface, and then you'll finish up by adding the code the application needs to retrieve and display data from the accelerometer.

1. Creating the CaptureAccelerometerData Project

To set up the CaptureAccelerometerData project, follow the steps you've used for previous examples in this book.

1. Open Microsoft Visual Studio 2010 Express for Windows Phone on your workstation.

2. Create a new Windows Phone Application by selecting File => New Project on the Visual Studio command menu. Select the Windows Phone Application template, name the application "CaptureAccelerometerData," and click OK.

3. In order to use the accelerometer, add an assembly reference to Microsoft.Devices.Sensors by right-clicking the References folder in Solution Explorer and choose Microsoft.Devices.Sensors from the Add Reference window, as shown in Figure 2.

   Figure 2. Adding a reference to Microsoft.Devices.Sensors

   

2. Building the User Interface

You will be building the user interface using the XAML in the Visual Studio. For building simple controls, it is faster to work with the XAML code. Go to Solution Explorer, open MainPage.xaml, and replace the XAML you find there with the following code.

2.1. Declaring the UI Resources

The namespaces you see in the following code snippet are typically declared by default when you first create a Windows Phone project. In particular, the namespaces xmlns:phone="clr-namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone" allow you to add common Windows Phone controls to the application main page.

<phone:PhoneApplicationPage
    x:Class="CaptureAccelerometerData.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">

					  

2.2. Building the Main Page and Adding Components

Now create the components you need to display the x, y, z values, and the time reading that your application captures from the accelerometer. You'll also want to add components to display the pitch, roll, and theta values of the device, which you will calculate and use to understand how the phone is oriented. Finally, you also need buttons to start and to stop the accelerometer, which are also specified in this snippet.

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="CaptureAccelerometer Data"
Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBlock Name="txtX" Text="TextBlock"
                       Margin="160,56,12,0" FontSize="20"
                       Height="31" VerticalAlignment="Top" />
            <TextBlock Name="txtY" Text="TextBlock"
                       Margin="160,119,12,556" FontSize="20" />
            <TextBlock Name="txtZ" Text="TextBlock"
                       Margin="155,181,12,490" FontSize="20" />
            <TextBlock Name="txtTime" Text="TextBlock"
                       Margin="155,244,12,427" FontSize="20" />
            <Button Content="Start" Height="72"
                    Name="btnStart" Width="160"
                    Margin="36,514,284,119" Click="btnStart_Click" />
            <Button Content="Stop" Height="72"
                    Name="btnStop" Width="160"
                    Margin="207,514,113,119" Click="btnStop_Click" />
            <TextBlock FontSize="40" Margin="66,34,331,614"
                       Name="lblX" Text="X" />
            <TextBlock FontSize="40" Margin="66,97,331,552"
                       Name="lblY" Text="Y" />
            <TextBlock FontSize="40" Margin="66,159,346,489"
                       Name="lblZ" Text="Z" />
            <TextBlock FontSize="40" Margin="12,222,331,422"
                       Name="lblTime" Text="Time" />
            <TextBlock FontSize="20" Margin="160,285,7,386"
                       Name="txtPitch" Text="TextBlock" />
            <TextBlock FontSize="22" Margin="0,283,370,365"
                       Name="textBlock3" Text="Pitch" TextAlignment="Right" />
            <TextBlock FontSize="20" Margin="160,345,7,326"
                       Name="txtRoll" Text="TextBlock" />
            <TextBlock FontSize="22" Margin="0,343,370,305"
                       Name="textBlock4" Text="Roll" TextAlignment="Right" />

					  

<TextBlock FontSize="20" Margin="160,408,7,263"

                       Name="txtTheta" Text="TextBlock" />
            <TextBlock FontSize="22" Margin="0,406,370,242"
                       Name="textBlock6" Text="Theta" TextAlignment="Right" />
        </Grid>

</phone:PhoneApplicationPage>

					  

Once you have loaded the XAML code, you should see the layout shown in Figure 3. In the next section, you will be adding events to the updating of the UI with captured accelerometer data.

Figure 3. CaptureAccelerometerData demo design view