Simple Reaction Time Application in Windows Phone 7

Introduction

In this article we are going to explore how to calculate the reaction time of the user when clicking it in Windows Phone 7. Further in details we will see that whenever we click on the Grid then it will simply show your reaction time in milliseconds. Here in this article we will use some designing template of the XAML which is used to animate the grid window upon clicking the ready button. At which time you will click on the grid to go then it will show your time of reaction inside the Windows Phone application. Here in this article we have to use VisualStateManager Class which is used to manages states and the logic for transitioning between states for controls. Further Template authors add VisualStateGroup objects the VisualStateManager.VisualStateGroups attached property to represent states of a control and Control authors transition between states by calling the GoToState method. So inside it we are implementing some animation concept via StoryBoard class to rotate. Further to implement such type of functionality in your Windows Phone application then you have to follow the steps which is given below.

Step 1: In this step first of all we have to open a Windows Phone application; let us see how you will open it.

Go to Visual Studio 2010
File->New->Project
Select the template named as Silverlight for Windows Phone
Select the Windows Phone application
Give it a name as you want.

Step 2: In this step we will see that there is an important namespaces which you have to added to the MainPage.xaml.cs file; let us see the namespaces which are given below.

Step 3: In this step you will have to write the code for the MainPage.xamp.cs file which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;
using System.Windows.Threading;

using System.Diagnostics;
namespace reactiontime
{
public partial class MainPage : PhoneApplicationPage
{
private readonly Random My_random = new Random();
private readonly DispatcherTimer My_Dis_timer = new DispatcherTimer();
private readonly Stopwatch My_stop_wtch = new Stopwatch();
public MainPage()

{

InitializeComponent();
My_Dis_timer.Tick += OnBeginWaiting;

}
protected void OnReady(object sender, RoutedEventArgs e)

{

My_Dis_timer.Interval = TimeSpan.FromSeconds(My_random.Next(2, 5));

My_Dis_timer.Start();
VisualStateManager.GoToState(this, "Starting", true);

}
private void OnBeginWaiting(object sender, EventArgs e)

{

My_Dis_timer.Stop();

My_stop_wtch.Start();
VisualStateManager.GoToState(this, "Waiting", true);
}
protected void OnFinished(object sender, MouseButtonEventArgs e)

{

if (My_stop_wtch.IsRunning)

{

My_stop_wtch.Stop();
Time.Text = String.Format("{0} ms", My_stop_wtch.ElapsedMilliseconds);

}

else

{
My_Dis_timer.Stop();
Time.Text = "It's Too Quik Reaction";
}
VisualStateManager.GoToState(this, "Finished", true);
}
}
}

Step 4: In this step you will see the code for the MainPage.xaml file which is given below.

Code:

<phone:PhoneApplicationPage

x:Class="reactiontime.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"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup.Transitions>

</VisualStateGroup.Transitions>

<DoubleAnimation Duration="0" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"

Storyboard.TargetName="Ready" d:IsOptimized="True"/>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"