Wednesday, February 20, 2013

How to build a multi-touch control for Windows Phone

     What I intend for multi-touch? Windows Phone is already a multi-touch device but for some reason (I guess it is legacy of Silverlight) the standard Xaml controls don’t have a real multi-touch behavior. Real multi-touch means that I should be able to interact with two different objects at the same time with multiple fingers. What happens now for the XAML standard controls is that once a control start receiving touch events (ManipulationStarted, ManipulationEnded, ManipulationDelta) all the other controls will not receive touch events. The easiest test to do is add a standard button on the page, put one finger on the screen outside the button and try to press the button with another finger. You will see that the button does not respond to your commands. For Xaml applications this might not be a problem, but for games it becomes one. Xaml (I mean Xaml+C# or XAML+VB.NET) is fast to develop easy games.

The solution would be to build your own control and use Touch.FrameReported to “drive” it. In this sample I will build a multi-touch button. I will call it ButtonEx (some of you remember OpenNETCF J ?) and I will just add three events to it: TouchDown, TouchUpInside, TouchUpOutSide (iOs MonoTouch event names). With this three events I should have better control (Click in reality is a TouchUpInside event) .
So I've created a new Windows Phone Class Library called ControlsEx and I added the control ButtonEx derived from ContentControl. I copied the standard style of the Button control (you can easily generate it from a standard button using Blend and Edit Copy command on the Button Template). I've then added the style to the /Themes/generic.xaml file inside our project.  When I create the control I will subscribe Loaded and Unloaded events as I want to start receiving Touch events when the control loads and unsubscribe the Touch events when the control gets unloaded.

  public ButtonEx()  
       DefaultStyleKey = typeof(ButtonEx);  
       this.Loaded += ButtonEx_Loaded;  
       this.Unloaded += ButtonEx_Unloaded;  
       IsEnabledChanged += ButtonEx_IsEnabledChanged;  
       IsPressed = false;  
     void ButtonEx_Loaded(object sender, RoutedEventArgs e)  
       Touch.FrameReported += Touch_FrameReported;  
     void ButtonEx_Unloaded(object sender, RoutedEventArgs e)  
       Touch.FrameReported -= Touch_FrameReported;  

     Now everything we need “happens” inside the Touch_FrameReported  method. For my button I am interested to trace only one finger(using its id) from TouchAction.Down until TouchAction.Up. Once the first finger is down on the surface of my control I memorize the id and track it’s actions till it leaves the screen. Depending of the control that you are building you might have to take in consideration multiple fingers. One thing that is pretty important when starting to track a finger is to see if your control is in front or not (imagine an MessageBox over your controls and when you press the Ok button you will also press the button which is in the back). To resolve this issue I’ve used TouchDevice.DirectlyOver property of the TouchPoint and the VisualTreeHelper to see if the UIElement returned by DirectlyOver is a member of my control or not.
  bool IsControlChild(DependencyObject element)  
       DependencyObject parent = element;  
       while ((parent != this) && (parent != null))  
       if (parent == this)  
         return true;  
         return false;  
Here is the method Touch_FrameReported method:

 void Touch_FrameReported(object sender, TouchFrameEventArgs e)  
       if (Visibility == Visibility.Collapsed)  
       TouchPointCollection pointCollection = e.GetTouchPoints(this);  
       for (int i = 0; i < pointCollection.Count; i++)  
         if (idPointer == -1)  
           if (IsEnabled&&(Visibility==Visibility.Visible) && (pointCollection[i].Action == TouchAction.Down) && IsControlChild(pointCollection[i].TouchDevice.DirectlyOver))  
             //start tracing this finger  
             idPointer = pointCollection[i].TouchDevice.Id;  
             IsPressed = true;  
             VisualStateManager.GoToState(this,"Pressed", true);  
             if (TouchDown != null)  
               TouchDown(this, pointCollection[i].Position);  
         else if ((pointCollection[i].TouchDevice.Id == idPointer) && (pointCollection[i].Action == TouchAction.Up))  
           idPointer =-1;  
           IsPressed = false;  
           if ((pointCollection[i].Position.X > 0 && pointCollection[i].Position.X < ActualWidth) && (pointCollection[i].Position.Y > 0 && pointCollection[i].Position.Y < ActualHeight))  
             if (TouchUpInside != null)  
               TouchUpInside(this, pointCollection[i].Position);  
             if (TouchUpOutside != null)  
               TouchUpOutside(this, pointCollection[i].Position);  
    For the button control we don’t have to trace the movements of the finger until Up action but we might need to if we are writing a Slider control for example. The sample application that you will find in the source code uses 2 ButtonEx controls and a standard Button control. The ButtonEx should always respond to your commands (fingers).

    I’ve also used this approach to develop an multi-touch XAML game for flying an Bluetooth BeeWi helicopter. I will also have a session on the 27th February at Community Days here in Italy where I will present a session on developing a game for Windows Phone and I will use this game as a starting point. This application has multi-touch buttons, slider and joystick control.

Also have to thank the TTT (Train The Trainer) program which awarded me a beautiful Sphero for my multi-touch controls.

As always don’t hesitate to contact me if you have further questions.

Wednesday, February 6, 2013

Update the HTC Mazaa to Windows Phone 7.8

 HTC Mazaa was the first ever Windows Phone to run the 7.5 build of the OS. It is a really great development device (as performance it is somewhere between the gen 1 devices and the gen 2 devices) but unfortunately it haven't received any updates since the RTM release build 7.10.7720.68. If you still have RTM build on it you will probably see that you are not even able to access the Store anymore. The bad news is that it will not receive any automatic updates but if you want you can still manually update it to the Windows Phone 7.8 version on it.
   To manually update the device you will need :
  1. Zune 4.8 final (build 4.8.2345.0)
  2. Download the WP7_update_tool.rar and install the UpdateWP package for your platform (x86 or x64). This is version 4.8.2134.0. You can download the Update tool from this post
   What you will need to do is simulate the steps that Zune does when it updates your phone. At each step there are a number of cab that you can send to the phone at the same time. BACKUP YOUR PHONE before updating. This tutorial starts the update from the version 7.10.7720.68 up to 7.10.8858.136. If you have a heigher version than 7.10.7720.68 just start from the step of the version you have. We assume that your Mazaa has the following language packs installed (if you have less just remove the corresponding cabs from each step):
  • German (0407)
  • English - United States (0409)
  • French (040C)
  • Italian (0410)
  • English - United Kingdom (0809)
  • Spanish (0C0A)
   At each step just run:
 updatewp /iu [concatenate cab's from step here with space between]

Here are the cabs for each step:

1) 7.10.7720.68-7.10.7740.16

2) 7.10.7740.16-7.10.8107.79

3) 7.10.8107.79-7.10.8112.7

4) 7.10.8112.7-7.10.8773.98

5) 7.10.8773.98-7.10.8779.8 

6) 7.10.8779.8-7.10.8783.12

7) 7.10.8783.12-7.10.8858.136

If you have problems updating please let me know.

BTW I am not responsible if you BRICK your phone :) . Here is mine updated:


Monday, February 4, 2013

How to use Team Foundation Service with MonoDevelop

  As you probably know Team Foundation Service team announced a few days ago full support for Git protocol. This was AWESOME news for our small company that needed a FREE source control solution for our MonoTouch and Mono for Android projects. We were already using for our Windows Phone and Windows 8 projects and previously to Git support in TFS we had an in-house svn server but I was not really happy with it. The thing it took me most was to understand what is the Git endpoint address than everything is standard.
  Here is a quick guide on how to create and then use a TFS Git repository with MonoDevelop:
  1. First you need to create a new Team Project with Git support 
     Once the project is created press the "Navigate to projec"t button. 

2. Go to Code explorer and you will be able to see the the Git endpoint address. It might not show the git endpoint the first time but if you navigate away and try again you will see it.

3. Use the Git endpoint address to register a new Repository in MonoDevelop

4. Then just publish your solution using the registered repository. You can see all your files in Code Explorer and also all the commits:

Tip: If you want to use a more simple user name than you full live id you can enable your Alternate Credentials on the User Profile page 

The same Git endpoint can be also used to "Connect to a repository" in Xcode for your Obejctive C projects.

Thank you TFS TEAM for this great feature.