In this article we will explore touch feature of Windows Phone 7 using Silverlight.

Let's see how we can do this.

Silverlight supports high level and low level multi-touch interface.

The high level multi touch interface has three events ManipulationStarted, ManipulationDelta and ManipulationCompleted. The Manipulation events consolidate the touch of multiple fingers into movement.

The low level interface in Silverlight is based upon static TouchPoint class. TouchPoint has four readonly properties

1. Action of type TouchAction: It is enumeration with Down, Move and Up members.

2. Position of type Point: It is relative position from upper left corner of any element.

3. Size of type Size: It represents the touch area.

4. TouchDevice of type TouchDevice: It provides two readonly properties the first one is id of type int which is used to distinguish between fingers. Each finger is associated with unique id and the second is DirectlyOver of type UIElement represents the topmost element under the finger.

Let's write some code to demonstrate low level touch interface.

Add a TextBlock inside the contentpanel in MainPage.xaml.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <TextBlock Name="txtContent" Text="Touch, Windows Phone 7!"
   Padding="0 34" HorizontalAlignment="Center"
   VerticalAlignment="Center" />
</Grid>

If you noticed i have applied padding of 34 on top and bottom. Padding of 34 is required because touch targets should not be smaller than 9 millimeters.

By default FontSize is 20 pixels which makes TextBlock 27 pixels tall. It is recommended that touch target should not be less than 9 millimeters for 264 DPI phone display which is 94 pixels. The calculation of 94 pixels is

(9 mm / 25.4 mm) * 264 (pixels per inch) = 93.54 = 94 (Rounded off)

As TextBlock is of 27 pixel we are short of 94-27 = 67 pixel, so we need to set the padding of 34 on top and bottom.

Let's write codebehind code in MainPage.xaml.cs. Below code will change the color of the text on each touch.

namespace Windows_Phone_7___Part_1
{
   public partial class MainPage : PhoneApplicationPage
   {
      Random rand = new Random();
      Brush originalBrush;
      
      public MainPage()
      {
         InitializeComponent();
         originalBrush = txtContent.Foreground;
         Touch.FrameReported += OnTouchFrameReported;
      }
      
      void OnTouchFrameReported(object sender, TouchFrameEventArgs args)
      {
         TouchPoint primaryTouchPoint = args.GetPrimaryTouchPoint(null);
         if (primaryTouchPoint != null && primaryTouchPoint.Action == TouchAction.Down)
         {
            if (primaryTouchPoint.TouchDevice.DirectlyOver == txtContent)
            {
               txtContent.Foreground = new SolidColorBrush(
Color.FromArgb(255, (byte)rand.Next(256), (byte)rand.Next(256), (byte)rand.Next(256)));
            }
            else
            {
               txtContent.Foreground = originalBrush;
            }
         }
      }
   }
}

Touch.FrameReported event is a low level touch interface with OnTouchFrameReported handler which takes all the event throughtout the application.

TouchFrameEventArgs has TimeStamp property of type int along with three methods

1. GetTouchPoints(refElement) which returns a TouchPointCollection: It returns the position property relative to that element. 

2. GetPrimaryTouchPoint(refElement) which returns one TouchPoint

3. SuspendMousePromotionUntilTouchUp(): It is called only when first finger touches the screen.

In the above code GetPrimaryTouchPoint has been used to find the TouchAction.

DirectlyOver element indicates the element under the finger. If DirectlyOver property is the name of txtContent then apply some logic. In the above example it is changing color of Text on touch.

The next article discusses about Windos Phone 7 High Level Touch