.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> Windows 7 >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Touch events in Silverlight for Windows 7 mobile application Part 2

Posted By:Dhananjay Kumar       Posted Date: March 29, 2010    Points: 25    Category: Windows 7    URL: http://www.dotnetspark.com  

Explore Touch events in Silverlight for Windows 7 mobile application Part 2. The text in text block was not resuming to original fonts and colors

Read my first article on touch events before going through this article.


We saw in last article on touch events that, even if after touching (clicking) somewhere else than text block, the text in text block was not resuming to original fonts and colors. The reason behind that was, I attached the event to the text block. I can conclude reason as follows
  1. I attached ManipulationStarted event to text block.
  2. I did not handle ManipulationCompleted event for the text block.
  3. In ManipulationStarted event for text block I changed the text color and font size.
  4. But I did not write code for resuming the original font size and color on ManipulationCompleted event for text block.
Normal behavior should be, when user is touching or clicking somewhere else on the screen text block should resume to its originality.

So how to achieve it

Fine; when we see the class hierarchy. I will explain this hierarchy in later articles. But what point to be noted here is that , we can override OnManipulationStarted method and then can sense the touch on whole screen. We can override this method and check if the source of the touch is text block , we can manipulate color and font . If source is somewhere on the screen we can restore the default font and color.


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. 



The code I changed is in bigger font and yellow background. This time there is no event attached to text block. 
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 overridden method.


namespace FirstWindowPhoneApplication
  public partial class MainPage : PhoneApplicationPage
  Random radNumber = new Random();
  public MainPage()
  SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

  protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
  Color clr = Colors.White;
  double  font = 30;
  if (e.OriginalSource == txtHelloWord)
  clr = Color.FromArgb(255, (byte)radNumber.Next(255), (byte)radNumber.Next(255), (byte)radNumber.Next(255));
  font = 75;
  txtHelloWord.Foreground = new SolidColorBrush(clr);
  txtHelloWord.FontSize = font;

  1. I am overriding OnManipulationStarted method here.
  2. I am checking what the source of calling the method is.
  3. If it is text box, I am setting the font size and color to random color.
  4. If it is not text box , I am setting size and color to default.
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 75 and foreground color will change randomly. But when you click outside the text block or any other place on page text font size will be changed to 30 and text color to white.


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


Again when user will touch any other place on the page , text color and text size will restore to white and 30 respectively.



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

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend