Evento Pan Windows Phone 7. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Varios Windows Phone 7

¡votar!

Evento Pan Windows Phone 7

Este gesto es totalmente diferente a los vistos anteriores el usuario mueve el dedo a través de la pantalla, es como cuando hemos realizado Drag & Drop en aplicaciones de PC, como si el dedo fuese el ratón y controlásemos el evento MouseMove. Siguiendo la idea que hemos realizado con los dos anteriores gestos vamos a realizar un behaivor al que denominaremos PanAction que nos permita obtener este gesto del usuario y sea redirigido a un evento, la única diferencia con los anteriores es que lo delimitaremos al objeto Canvas y moveremos todos los hijos del canvas en la dirección que mueva el dedo el usuario, en definitiva implementaremos un Drag&Drop donde el usuario podrá simular los movimientos que vemos en los siguientes dibujos .

El código correspondiente a este behaivor sería el siguiente

public class PanAction : Behavior{ 
protected Point? MouseDown; 
protected UIElement SelectedItem { get; set; } 
protected override void OnAttached(){ 
base.OnAttached(); 
this.AssociatedObject.MouseLeftButtonDown += AO_MouseLeftButtonDown;
this.AssociatedObject.MouseLeftButtonUp += AO_MouseLeftButtonUp; 
this.AssociatedObject.MouseMove += AO_MouseMove;
}
protected override void OnDetaching(){
this.AssociatedObject.MouseLeftButtonDown -= AO_MouseLeftButtonDown;
this.AssociatedObject.MouseLeftButtonUp -= AO_MouseLeftButtonUp;
this.AssociatedObject.MouseMove -= AO_MouseMove; 
base.OnDetaching(); 
} 
private void AO_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ 
this.MouseDown = e.GetPosition(null); 
this.SelectedItem = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null), this.AssociatedObject).FirstOrDefault(); 
if (this.SelectedItem == this.AssociatedObject){ 
this.SelectedItem = null; 
} 
} 
protected virtual void AO_MouseMove(object sender, MouseEventArgs e){ 
var pos = e.GetPosition(null); 
var xdiff = pos.X - MouseDown.Value.X; 
var ydiff = pos.Y - MouseDown.Value.Y;
if (MouseDown.HasValue){ 
MoveSelectedItems(xdiff, ydiff); 
} 
MouseDown = pos; 
} 
private void AO_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){ 
this.SelectedItem = null; 
this.MouseDown = null; 
} 
protected void MoveSelectedItems(double xdiff, double ydiff){ 
if (this.SelectedItem != null){ 
MoveItem(this.SelectedItem, xdiff, ydiff); 
}else{ 
foreach (var child in this.AssociatedObject.Children){ 
MoveItem(child, xdiff, ydiff);
} 
} 
} 
private void MoveItem(UIElement item, double xdiff, double ydiff){ 
var left = Canvas.GetLeft(item) + xdiff;
left = Math.Min(Math.Max(0, left), this.AssociatedObject.ActualWidth);
var top = Canvas.GetTop(item) + ydiff;
top = Math.Min(Math.Max(0, top), this.AssociatedObject.ActualHeight); 
Canvas.SetLeft(item, left); 
Canvas.SetTop(item, top);
} 
}

Como podeis observar en el código hemos asociado el behaivor a los objetos Canvas y a la hora de”Atacharlo” nos subscribimos a los eventos MouseLeftButtonDown, MouseLeftButtonUp, MouseMove con estos tres eventos tenemos todo lo necesario para simular el Drag&Drop, lo importante esta en el evento MouseLeftButtonDowndonde obtenemos los objetos hijos del Canvas a través del método

this.SelectedItem = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null), this.AssociatedObject).FirstOrDefault();

Una vez recogidos los objetos que el usuario ha “tocado” en el evento MouseMove solo deberemos moverlos. Para probar este behaivor vamos a extender el proyecto anterior para tener un Canvas con puntos verdes que se podrán mover con este behaivor.

<Border HorizontalAlignment="Left" Height="368" Margin="19,231,0,0" VerticalAlignment="Top" Width="441" BorderBrush="White" BorderThickness="2" Background="#FF313131">
<Canvas Background="Transparent">
<Canvas.Resources>
<Style x:Key="RoundedBorder" TargetType="Border"> 
<Setter Property="BorderThickness" Value="3"/> 
<Setter Property="CornerRadius" Value="20"/> 
<Setter Property="Background" Value="#FF287E3D"/> 
<Setter Property="BorderBrush" Value="#FF0F451C"/> 
<Setter Property="Width" Value="25"/> 
<Setter Property="Height" Value="25"/> 
</Style>
</Canvas.Resources> 
<i:Interaction.Behaviors> 
<local:PanAction /> 
</i:Interaction.Behaviors> 
<Border Canvas.Left="43" Canvas.Top="137" Style="{StaticResource RoundedBorder}" > 
</Border> 
<Border Canvas.Left="122" Canvas.Top="83" Style="{StaticResource RoundedBorder}" > 
</Border> 
<Border Canvas.Left="294" Canvas.Top="301" Style="{StaticResource RoundedBorder}" > 
</Border> 
<Border Canvas.Left="273" Canvas.Top="51" Style="{StaticResource RoundedBorder}" > 
</Border> 
<Border Canvas.Left="74" Canvas.Top="242" Style="{StaticResource RoundedBorder}" > 
</Border> 
<Border Canvas.Left="236" Canvas.Top="167" Style="{StaticResource RoundedBorder}" > 
</Border>
</Canvas>
</Border>

Obtendríamos la siguiente pantalla