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_1_1fig.gif

Step_1_2fig.gif

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_2fig.gif

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">
    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="ReactionStates">

                <VisualStateGroup.Transitions>

                    <VisualTransition GeneratedDuration="0:0:0.5"/>

                    <VisualTransition From="Starting" To="Waiting"/>

                </VisualStateGroup.Transitions>

                <VisualState x:Name="Starting">

                    <Storyboard>

                        <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)"

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

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

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

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="Waiting">

                    <Storyboard>

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

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

                        <ColorAnimation Duration="0" To="#FF319A31" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"

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

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="Message">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="Go"/>

                        </ObjectAnimationUsingKeyFrames>

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

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

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

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

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="Finished">

                    <Storyboard>

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

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

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">

            <TextBlock x:Name="PageTitle" Text="My Reaction Time" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"

                       FontFamily="Comic Sans MS" FontSize="56">

                 <TextBlock.Foreground>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                       <GradientStop Color="Black" Offset="0" />

                       <GradientStop Color="#FFD084A0" Offset="1" />

                    </LinearGradientBrush>

                 </TextBlock.Foreground></TextBlock>

        </StackPanel>
        <Grid x:Name="ContentGrid" Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>

            <Button x:Name="Ready" Content="Click to Ready" Click="OnReady" VerticalAlignment="Center" Grid.Row="2" FontFamily="Comic Sans MS" FontSize="36">

                <Button.Foreground>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FF86F0FF" Offset="1" />

                    </LinearGradientBrush>

                </Button.Foreground>

                <Button.Projection>

                    <PlaneProjection CenterOfRotationX="0"/>

                </Button.Projection>

            </Button>

            <Grid x:Name="Trigger" Background="Chocolate" MouseLeftButtonDown="OnFinished" Width="200" Height="200"

                  HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">

                <Grid.RenderTransform>

                    <CompositeTransform ScaleX="0" ScaleY="0"/>

                </Grid.RenderTransform>

                <TextBlock x:Name="Message" HorizontalAlignment="Right" Margin="0,0,12,12" Style="{StaticResource PhoneTextNormalStyle}"

                           TextWrapping="Wrap" Text="Ready" VerticalAlignment="Bottom"/>

            </Grid>

            <StackPanel x:Name="Results" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal">

                <StackPanel.Projection>

                    <PlaneProjection CenterOfRotationX="0" RotationY="90"/>

                </StackPanel.Projection>

                <TextBlock Style="{StaticResource PhoneTextLargeStyle}" TextWrapping="Wrap" Text="Your time was" FontFamily="Comic Sans MS" Foreground="#FFB6E1A2" />

                <TextBlock x:Name="Time" Style="{StaticResource PhoneTextAccentStyle}" TextWrapping="Wrap" FontSize="32"/>

            </StackPanel>

            <Grid.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFDDE0C7" Offset="1" />

                </LinearGradientBrush>

            </Grid.Background>

        </Grid>

    </Grid>
</
phone:PhoneApplicationPage>

 

Step 5: In this step you will see the design of the MainPage.xaml file which is given below.

 

Designimg.gif

Step 6:
In this step we are going to run the application by pressing F5 and the output regarding this is given below.

 

Output 1: It's the default output of the Windows Phone application.


Output1.gif

 

Output 2: After click on the click to ready button then you have to click on the grid before it changes it's state. Output shows that it's too quick to see the reaction time which is given below.


Output2.gif


Output 3: This output will we shown on click whenever the color of the grid has been changed then it will shows you your reaction time.


Output3.gif

 

Output 4: In this output you will see another reaction time figure which is given below.


Output4.gif


Here are some other resources which may help you.
 

Digital Clock in Windows Phone 7

Installing Application from Marketplace

Calculator in Windows Phone

Understanding Launchers and Choosers in Windows Phone 7

Introduction and Prerequisities of Windows Phone 7