By David E.
Within a Silverlight application, there are basically two ways to implement events related to the Windows Phone 7 Touch Screen: Touch events using the low-level interface and events handling or manipulation.
Touch Events using the low-level interface
Basically these methods revolve around the “Touch” a static event, FrameReported and also a class called TouchPoint which has the following properties:
· Action of the TouchAction type that is an enumeration with Down, Move and Up members.
· Position of the Point Type that corresponds to the position on the top left corner of an element which is known as reference.
· Size of the Size Type represents the size of the down area and the pressure, even thought the values returned by Windows Phone 7 are not very useful.
· TouchDevice of TouchDevice type.
The TouchDevice object has two read-only properties:
· Id of the Int type, used to distinguish between the fingers that press on the screen. A finger in particular relates to a single ID across all the touch events from Up and Down
· DirectlyOver of the UIElement type that is perhaps the most important property, and refers to the UI element that is right under your finger when pressing the screen.
To use the low-level interface of the Touch, it is necessary to add a static event handler named Touch.FrameReported.
Touch.FrameReported += OnTouchFrameReported;
OnTouchFrameReported method would be as follows:
void OnTouchFrameReported(object sender, TouchFrameEventArgs args)
{
}
The TouchFrameEventArgs class has a TimeStamp property of int type plus 3 methods that are useful to know the pressure points:
• GetTouchPoints (refElement) returns a TouchPointCollection: This method gets all the pressure points for each element sent by reference. You can send null to get all the pressure points with respect to the upper left corner of the screen.
• GetPrimaryTouchPoint (refElement) returns one TouchPoint. This method gets the first point of contact on the phone screen when there are no more fingers touching the screen
• SuspendMousePromotionUntilTouchUp () This method can only be called when the first finger touches the screen and prevents mouse events to propagate through the application.
Now let’s see an example of how we can implement the touch on Silverlight using the low-level interface.
This requires that you have installed the Windows Phone 7 development tools. These tools can be downloaded for free from this link http://developer.windowsphone.com/
The first thing you need to do when having your tools installed is to join Visual Studio 2010 and create a new Silverlight application.
Fig. 1: Silverlight Project creation
Once we have created a project, VS creates our first page of the Windows phone application with a series of initial checks under the name of your application and on the same page.
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="first touch app" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
The next thing is to create a control that reacts to the Touch event on the screen and cause a simple change visible to the user
<TextBlock HorizontalAlignment="Center" Margin="0" Name="txtblk" Text="Touch me and you'll see!!" VerticalAlignment="Center" Padding="0 22" />
We are going to declare two properties that will help us control a color change in the text we added on our website.
Random rand = new Random();
Brush originalBrush;
With the control ready the next thing to do is to add the codebehind that will cause the button react to the touch. The first thing is to subscribe to the static Event Touch.FrameReported for the application to react when the screen is pressed.
public MainPage()
{
InitializeComponent();
originalBrush = txtblk.Foreground;
Touch.FrameReported += OnTouchFrameReported;
}
And in the implementation of the method, we need to check if the primary contact point is just above the control we added. If so, change the color of the textblock, otherwise, return it to their original color.
void OnTouchFrameReported(object sender, TouchFrameEventArgs args)
{
TouchPoint primaryTouchPoint = args.GetPrimaryTouchPoint(null);
if (primaryTouchPoint != null && primaryTouchPoint.Action ==
TouchAction.Down)
{
if (primaryTouchPoint.TouchDevice.DirectlyOver == txtblk)
{
txtblk.Foreground = new SolidColorBrush(
Color.FromArgb(255, (byte)rand.Next(256),
(byte)rand.Next(256),
(byte)rand.Next(256)));
}
else
{
txtblk.Foreground = originalBrush;
}
}
}