Artículo

---

0 ¡votar!

Evento Tap en Windows Phone 7

Este evento funciona como si tuviésemos un ratón en nuestro dedo y reacciona al simple toque de nuestro dedo en la pantalla, como supondréis este gesto viene implementado en muchos controles, por ejemplo el control Button lo expone a través del evento Click

<Button Content=”Simple Gestures” Name=”SimpleGestureButton” Click=”SimpleGestureButton_Click” />

Sin embargo no todos los controles exponen el gesto Tap, por ejemplo el elemento Border que hereda de Panel no expone el evento Click, si seguimos el árbol de herencia veremos que llegaremos al elemento UIElement el cual expone los eventos MouseLeftButtonDown y MouseLeftButtonUp . Para simular el gesto de Tap con estos dos eventos podríamos utilizar un behaivor que nos permita reusarlo para cualquier elemento.

Para realizar un behaivor podéis ver este articulo que aunque sea de WPF es lo mismo tanto para Silverlight como WPF, recordar que para realizar un behaivor debemos de añadir la referencia al assemblie System.Windows.Interactivity.dll, el behaivor lo enlazaremos a cualquier elemento de la clase UIElement y lo que hará será lanzar un evento Tap jugando con los dos eventos anteriores, aquí tenéis el código.

public class TapAction : Behavior{
public event EventHandler Tap;
protected bool MouseDown { get; set; }
protected override void OnAttached() { 
base.OnAttached(); 
this.AssociatedObject.MouseLeftButtonDown += AO_MouseLeftButtonDown;
this.AssociatedObject.MouseLeftButtonUp += AO_MouseLeftButtonUp; 
}
protected override void OnDetaching() { 
this.AssociatedObject.MouseLeftButtonDown -= AO_MouseLeftButtonDown;
this.AssociatedObject.MouseLeftButtonUp -= AO_MouseLeftButtonUp; 
base.OnDetaching();
} 
void AO_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){ 
if (MouseDown){ 
OnTap();
}
MouseDown = false;
}
void AO_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){
MouseDown = true; 
}
protected virtual void OnTap(){
if (Tap != null){
Tap(this.AssociatedObject, EventArgs.Empty);
}
}
}

Luego en cualquier elemento como un Border se lo asociaremos por XAML

<phone:PhoneApplicationPage 2 x:Class="TouchInput.MainPage" 					xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:TouchInput.Helper"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
FontFamily="{StaticResource PhoneFontFamilyNormal}" 
FontSize="{StaticResource PhoneFontSizeNormal}" 
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle" Text="BUILT TO ROAM" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="flick tap pane" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
</StackPanel> 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid" Grid.Row="1">
<Border BorderBrush="#FFF11717" BorderThickness="2" Height="90" Margin="20,0,0,409" VerticalAlignment="Bottom" Background="#FFCC8787" HorizontalAlignment="Left" Width="160"> 
<i:Interaction.Behaviors>
<local:TapAction Tap="TapGesture_Tap"/> 
</i:Interaction.Behaviors> 
</Border> 
</Grid> 
</Grid>

Para asociar el behaivor por Blend os dejo los siguientes pantallazos




Como podéis ver capturamos el evento Tap y en el code-behind

private void TapGesture_Tap(object sender, EventArgs e){
MessageBox.Show("Has hecho TAP en el Border!");
}

De esta manera capturamos todos los eventos de Tap de una manera muy sencilla

Autor del artículo: Oskar Álvarez

Publicado por: Angel Carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios