Blog

Multi-Touch Simulation and Multi-Touch Behaviors for Windows Phone 7

[Infragistics] Mihail Mateev / Wednesday, December 29, 2010

When developing applications for Window Phone 7 is essential to realize the simulation of the Multi-Touch Activity for the applications. Currently, most computers do not have Multi-Touch Screens.
One very easy option is support for multiple mice. For this purpose you can find different solutions as Multimouse for Windows 7 or Multi-Touch Vista in codeplex. This article uses Multi-Touch Vista which is free and quite popular.

Installation of Multi-Touch Vista is presented in the magnificent art of Michael Sync "Installing Multi-Touch Simulator for Silverlight Phone 7”.


Sample application is based on sample for the article Creating Bing Maps Tile-Layers in Windows Phone 7

First the example will demonstrate how it works already Construction application for Windows Phone 7 c Multi-Touch Simulation with Multi-Touch Vista.
At the next stage will demonstrate how to use Multi-Touch Behaviors, developed by Laurent Bugnion (GalaSoft) and also presented in the article How to use the MultiTouch Behavior for Windows Phone 7.

Requirements:

Software:

Hardware:

  • Second USB Mouse

Step to reproduce:

  • Install required software
  • Build and start sample Windows Phone 7 application
  • Set up Multi-Touch Vista framework as it is described in the article ”Installing Multi-Touch Simulator for Silverlight Phone 7”
  • Start Multitouch.Service.Console.exe from Multi-Touch Vista framework.
  • Start Multitouch.Driver.Console.exe from the same package.
  • Switch to Thematic Maps Mobile application and make multi-touch zoom with a map.
  • Add Multi-Touch Behaviors in the Windows Phone 7 application
  • Rebuild and run the sample application.

Install required software

Build and start sample Windows Phone 7 application

Set up Multi-Touch Vista framework as it is described in the article ”Installing Multi-Touch Simulator for Silverlight Phone 7

Start Multitouch.Service.Console.exe from Multi-Touch Vista framework.

Start Multitouch.Driver.Console.exe from the same package (Multi-Touch Vista framework).

Switch to Thematic Maps Mobile application and make multi-touch zoom with a map.

Move both cursors to place it over the map

Drag with both mice in opposite directions to make zoom in and zoom out.

Stop Multitouch.Service.Console.exe pressing enter in the console

Add Multi-Touch Behaviors in the Windows Phone 7 application

Add a references to System.Windows.Interactivity and  MultiTouch.Behaviors.WP7.dll in the ThematicMapsWindowPhone application:

Add Multi-Touch Behaviors in the Map component for translation, rotation and scaling.

   1: <phone:PhoneApplicationPage 
   2:     x:Class="ThematicMapsWindowPhone.Views.ThematicMapView"
   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   9:     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
  10:     FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11:     FontSize="{StaticResource PhoneFontSizeNormal}"
  12:     Foreground="{StaticResource PhoneForegroundBrush}"
  13:     SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
  14:     shell:SystemTray.IsVisible="True"
  15:     xmlns:interactivity="clr-namespace:MultiTouch.Behaviors.WP7;assembly=MultiTouch.Behaviors.WP7"
  16:     xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
  17:     xmlns:localcontrols="clr-namespace:ThematicMapsWindowPhone.Controls" 
  18:     xmlns:Interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
  19:  
  20:     <!--LayoutRoot is the root grid where all page content is placed-->
  21:     <Grid x:Name="LayoutRoot" Background="Transparent">
  22:         <Grid.RowDefinitions>
  23:             <RowDefinition Height="Auto"/>
  24:             <RowDefinition Height="*"/>
  25:         </Grid.RowDefinitions>
  26:  
  27:         <!--TitlePanel contains the name of the application and page title-->
  28:         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  29:             <TextBlock x:Name="ApplicationTitle" Text="Thematic Maps Mobile" Style="{StaticResource PhoneTextNormalStyle}"/>
  30:             <TextBlock x:Name="PageTitle" Text="Map View" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  31:         </StackPanel>
  32:  
  33:         <!--ContentPanel - place additional content here-->
  34:         <Grid x:Name="ContentPanel" Grid.Row="1" HorizontalAlignment="Stretch"
  35:                VerticalAlignment="Stretch" Margin="12,0,12,0">
  36:             <my:Map HorizontalAlignment="Stretch"  Name="MainMap" 
  37:                     CredentialsProvider="AhyL1itKqs_HSBTekvefjurUR4O-eFGbahleUWXB5vB0e5zON9LSeWPwHghfQF_a"
  38:                     VerticalAlignment="Stretch">
  39:                 <Interactivity:Interaction.Behaviors>
  40:                     <interactivity:MultiTouchBehavior 
  41:                                IsTranslateXEnabled="True" IsTranslateYEnabled="True"
  42:                                IsRotateEnabled="True" 
  43:                                IsScaleEnabled="True"
  44:                                MinimumScale="3" MaximumScale="200"
  45:                                AreFingersVisible="True"/>
  46:                 </Interactivity:Interaction.Behaviors>
  47:                 <my:Map.Children>
  48:  
  49:                     <my:MapTileLayer x:Name="layerCountries" Visibility="Collapsed" Opacity="0.7" >
  50:                         <my:MapTileLayer.TileSources>
  51:                             <my:LocationRectTileSource  ZoomRange="1,19" />
  52:                         </my:MapTileLayer.TileSources>
  53:                     </my:MapTileLayer>
  54:                     <CheckBox x:Name="chkCountries"  Foreground="Black" VerticalAlignment="Bottom" 
  55:                         HorizontalAlignment="Left" Content="Countries" 
  56:                               Margin="5 5 5 70" IsChecked="False" 
  57:                               Click="ChkCountriesClick"/>
  58:                     <CheckBox x:Name="chkThematic" Foreground="Black" VerticalAlignment="Bottom" 
  59:                         HorizontalAlignment="Left" Content="Thematic Tiles" 
  60:                               Margin="5 5 5 10" IsChecked="False" 
  61:                               Click="CheckBoxThematic_Click"/>
  62:  
  63:                     <Button x:Name="btnDefaultZoom" Foreground="Black" VerticalAlignment="Bottom" 
  64:                         HorizontalAlignment="Right" Content="Default Zoom" 
  65:                               Margin="5 5 5 20" Click="BtnDefaultZoomClick"/>
  66:  
  67:                     <Border  VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0 13 10 0"  Opacity="0.8" BorderBrush="White" BorderThickness="2" CornerRadius="5">
  68:                         <StackPanel Margin="10 12 10 10">
  69:                             <!-- The TileLayer Radio button group. -->
  70:                            <RadioButton Foreground="Black" Name="Population_rBtn" GroupName = "TileLayers" Content="Color By Population" FontSize="12" Checked="CheckBoxThematic_Click" />
  71:                             <RadioButton Name="Area_rBtn" GroupName = "TileLayers" Content="Color By Area" Foreground="Black" FontSize="12" IsChecked="True" Checked="CheckBoxThematic_Click"/>
  72:                         </StackPanel>
  73:                     </Border>
  74:                 </my:Map.Children>
  75:             </my:Map>
  76:         </Grid>
  77:  
  78:         <Grid x:Name="Loading" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed" >
  79:             <localcontrols:Spinner x:Name="LoadSpinner" Canvas.ZIndex="100" Width="50" Height="50" Margin="5"/>
  80:         </Grid>
  81:     </Grid>
  82:  
  83: </phone:PhoneApplicationPage>

 

Repeat again steps from the first stage:

  • Start Multitouch.Service.Console.exe from Multi-Touch Vista framework.
  • Start Multitouch.Driver.Console.exe from the same package.
  • Switch to Thematic Maps Mobile application and make multi-touch interaction with a map.

 

Try to scale translate and rotate the map.

Enjoy! You have a multi-touch environment to test Windows Phone 7 applications. Multi-touch behaviors propose different transformations for selected control. You could test these behaviors using Multi- Touch Vista framework.