Utilizando gestos no Windows Phone

No Windows Phone o Silverlight oferece diversos recursos e maneiras de tratar a entrada de dados através de toques, dando ao usuário a facilidade da utilização de gestos naturais para interagir com os dispositivos.

Figura 1: Mãos simulando gestos

Então, é de extrema importância que o desenvolvedor prepare as aplicações para que essa interação ocorra sem problemas, oferecendo uma experiência ainda mais rica para o usuário.

Observação: todos os aparelhos com Windows Phone possuem suporte para múltiplos toques na tela.

É essencial que você conheça os possíveis modos de utilizar gestos no Windows Phone, verifique a tabela abaixo:

Tabela 1: Gestos disponíveis no Windows Phone

Não é muito difícil utilizar nas aplicações Silverlight os gestos (Double Tap, Tap, Hold) pois podem ser tratadas através de eventos. Neste artigo será criada uma aplicação para servir como exemplo do que foi explicado anteriormente. Abra o Visual Studio e crie um novo projeto WindowsPhoneApplication com o nome de GestosApp, conforme a Figura 2.

Figura 2: Criação do projeto GestosApp no Visual Studio

Ao criar o projeto é exibida uma caixa com a opção de escolha da versão do Windows Phone, escolha a 7.1, pois assim o seu aplicativo funcionará em todas as versões de Windows Phone disponíveis.

Na aplicação, quando o usuário encostar em alguma parte da tela, será criado um círculo, utilizando o evento Tap no controle canvas que será colocado no Content Panel. O primeiro passo é criar o Canvas no content panel de sua aplicação, para isso abra o arquivo MainPage.xaml e adicione ao content panel o Canvas, conforme a Listagem 1.

Listagem 1: Criação do canvas no content panel da aplicação

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <Canvas Name="canvas" Background="Azure" Tap="canvas_Tap"/>
</Grid>

Agora deve-se tratar o método Tap canvas_Tap que foi colocado no controle, para isso, abra o arquivo MainPage.xaml.cs e no método canvas_tap você irá instanciar um objeto Point e utilizá-lo para recuperar a posição exata em que foi feito o toque em relação ao canvas, guardando o valor na variável. Depois você irá instanciar um objeto do tipo SolidColorBrush para definir uma cor dos círculos a serem criados no canvas, e então irá definir um tamanho do tipo double, criar uma elipse para adicionar ao canvas e passar as propriedades. Por fim, irá definir a posição da elipse em relação ao canvas através dos métodos setLeft e setTop. Acompanhe como ficará a classe MainPage.xaml.cs através da Listagem 2.

Listagem 2: Código da classe MainPage.xaml.cs com o método canvas_Tap

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace GestosApp
{
	public partial class MainPage : PhoneApplicationPage
	{
		// Constructor
		public MainPage()
		{
			InitializeComponent();
		}

		private void canvas_Tap(object sender, GestureEventArgs e)
		{
			Point p = e.GetPosition(this.canvas);
			SolidColorBrush cor = new SolidColorBrush(Colors.Cyan);
			double tamanho = 50;
			Ellipse el = new Ellipse
			{
				Width = tamanho,
				Height = tamanho,
				Stroke = cor,
				Fill = cor
			};
			Canvas.SetLeft(el, p.X - (tamanho / 2));
			Canvas.SetTop(el, p.Y - (tamanho / 2));
			this.canvas.Children.Add(el);
		}
	}
} 

Pressione F5 e teste a aplicação, ela deverá estar conforme a Figura 3.

Figura 3: Imagem da aplicação em funcionamento

Agora, para acrescentar a utilização de mais um exemplo de utilização de gestos, será adicionada uma funcionalidade à aplicação em que ao usuário pressionar e segurar a tela, a cor de fundo será modificada.

Para isso, o primeiro passo é retornar ao arquivo MainPage.xaml e adicionar ao canvas o método para tratar o evento Hold, conforme a Listagem 3.

Listagem 3: Adição do evento Hold ao Canvas

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<Canvas Name="canvas" Background="Azure" Tap="canvas_Tap" Hold="canvas_Hold"/>
</Grid> 

O evento adicionado deve ser tratado no arquivo MainPage.xaml.cs da mesma maneira que o evento anterior. Portanto, abra agora o arquivo e adicione o método conforme a Listagem 4.

Listagem 4: Implementação do método do evento hold do Canvas

private void canvas_Hold(object sender, GestureEventArgs e)
{
	SolidColorBrush corFundo = new SolidColorBrush(Colors.Orange);
	canvas.Background = corFundo;
} 

Pressione F5 e teste a aplicação novamente, você poderá utilizar os dois eventos tranquilamente. Ao dar um toque no canvas você irá automaticamente gerar um círculo, e ao segurar o dedo na tela você irá alterar o fundo do canvas, conforme a Figura 4.

Figura 4: Imagem da aplicação em funcionamento com o fundo alterado

Caso você queira adicionar algum outro evento, o funcionamento é o mesmo. Você viu como é simples, basta agora pesquisar e conhecer os aplicativos oficiais para ter certeza de que está fazendo bom uso desses recursos oferecidos pelo Silverlight ao Windows Phone.

Um abraço e até o próximo artigo.

Conheça nossa sala no fórum sobre Windows Phone

• //www.devmedia.com.br/forum/windows-phone

Assista ao nosso curso de Windows Phone

• Curso de Introdução ao Windows Phone

Leia mais sobre o Windows Phone

• Capturando fotos em aplicações Windows Phone
• Utilizando o modo trial de aplicações no Windows Phone
• Conhecendo os templates Panorama e Pivot no Windows Phone