Touch events in Silverlight for Windows Phone 7 application-Part01

Objective

This article will explain how to work with Touch events in Silverlight for Windows 7 mobile application.

Background

On real device touch screen get sensed by users figure. But on the Emulator Mouse movement works as input for touch events.   Touch events detect movement of finger on the screen.

There are four touch events
1.    ManipulationStarted
2.    ManipulationInertiaStarting
3.    ManipulationDetla
4.    ManipulationCompleted
  

In this article, I am going to work with only ManipulationStarted event.  Follow the below steps

Step 1

From Start menu select Microsoft Visual Studio 2010 express edition 

Step 2

From File select New Project. From Silverlight for Windows phone tab select Windows Phone application project type.
 

Once selecting that a new project will get created with below solution structure 

Make sure in Debug option Windows Phone7 Emulator is selected. If it is selected to Windows Phone 7 Device then Visual studio will deploy the application to mobile device directly. 

Step 3

Open MainPage.Xaml and just add a text block. Set the text of the text block as Hello World. Here if you want you can change Title text also.
If you closely look into XAML, you will find there are two Grids inside main Grid. One is title Grid and other is body Grid.  So put your text block in the Body grid.

<phoneNavigation:PhoneApplicationPage 
    x:Class="FirstWindowPhoneApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    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}">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="MY First Mobile Application" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text=" Windows 7 " x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>

        <!--ContentGrid is empty. Place new content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBlock Text="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Azure" ManipulationStarted="TextBlock_ManipulationStarted" />

        </Grid>
    </Grid>
    
</phoneNavigation:PhoneApplicationPage>

The code I changed is in bigger font and yellow background.

Step 4

In code behind, I am going to write code for changing the color of the text and setting the font size. I will be writing code on event ManipulationStarted. Below is very simple code. In this code I am setting the color to a random and setting the font to double 50.

namespace FirstWindowPhoneApplication
{
    public partial class MainPage : PhoneApplicationPage
    {

        Random radNumber = new Random();
        public MainPage()
        {
            InitializeComponent();

            SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
        }

        private void TextBlock_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            TextBlock txtBlck = sender as TextBlock;
            Color clr = Color.FromArgb(255, (byte)radNumber.Next(255), (byte)radNumber.Next(255), (byte)radNumber.Next(255));
            txtBlck.Foreground = new SolidColorBrush(clr);
            txtBlck.FontSize = 50; 


        }
    }
}

Step 5

Just press F5 and in Windows 7 mobile emulator you can see the output. In center you can see Hello world.   When you click on the text block, font of the text will be changed to 20 and foreground color will change randomly.

Now when I click text color of the text will get changed. This will act exactly on the touch in real device. 

But when I click out area of the text box text size and color won’t get to its original because I have not handled ManipulationCompleted event.

Conclusion

This article explained how to handle touch in Silverlight application for Windows 7 mobile. Thanks for reading.