Introduction



Home Screen :

Name of Experiment : Display Coordinates(X, Y) for Touch Event

Exp No : WP4

Background : Student should have basic knowledge of C#.

Summary : This experiment is related to Gesture Services using Gesture listener for single touch event on the mobile screen. It is very important to understand at which pixel coordinates we are tapping. This experiment is quite helpful in getting the exact pixel coordinate(x, y) value during touch/tap process.

Learning Objective : To learn the process of accessing the coordinates(x, y) for each touch/ tap on the screen.

Target

Target Platform : This application is tested on Windows Phone Emulator or Windows Phone (Lumia 800).

Procedure

Source Code


MainPage.xaml

<phone:PhoneApplicationPage
x:Class="WP9.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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
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="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="PortraitDown"
shell:SystemTray.IsVisible="False">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="640"/>
<RowDefinition Height="480"/>
</Grid.RowDefinitions>

<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap" Hold="GestureListener_Hold"/>
</toolkit:GestureService.GestureListener>
<Canvas x:Name="viewfinderCanvas" Margin="12,0">
<Canvas.Background>
<VideoBrush x:Name="videoBrush" />
</Canvas.Background>
<TextBlock x:Name="focusBracket" Text="*" FontSize="48" Visibility="Collapsed" />
</Canvas>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="-1,340,25,300" Grid.RowSpan="2">
<TextBlock Name="txtDebug" FontSize="20" Margin="10,422,13,15" />
</Grid>

</Grid>

</phone:PhoneApplicationPage>


MainPagexaml.cs using Microsoft.Phone.Controls;
using System.Windows;
using System.Windows.Controls;
using System;

namespace WP9
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
MessageBox.Show("Please Tap on the Screen to get the Pixel Coordinates");
}

private void GestureListener_Tap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
try
{
Point tapLocation = e.GetPosition(viewfinderCanvas);
if (tapLocation != null)
{
focusBracket.SetValue(Canvas.LeftProperty, tapLocation.X);
focusBracket.SetValue(Canvas.TopProperty, tapLocation.Y);
double tapX = tapLocation.X;
double tapY = tapLocation.Y;
focusBracket.Visibility = Visibility.Visible;

this.Dispatcher.BeginInvoke(delegate()
{
this.txtDebug.Text = string.Format("Tapping Coordinates are X={0:N2}, Y={1:N2}", tapX, tapY);
});
}
}
catch (Exception error){
this.Dispatcher.BeginInvoke(delegate()
{
txtDebug.Text = error.Message;
});
}
}
}
}

Snapshots






Observation

Observation : It is observed that this experiment is quite useful in the game development process.

Video Link

For Windows Phone

Download

Right Click Here And Select Save Target For Entire Download :

Display Coordinates(X, Y) for Touch Event.