Utilizando gestos no Windows Phone

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Veja neste artigo como utilizar o recurso de gestos que o Siverlight oferece para o Windows Phone com um exemplo básico de uma aplicação com esse recurso.

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.

Mãos simulando gestos

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:

Gesto Descrição Função
Tap Toque no item uma vez. Abrir ou iniciar o item que você tocou.
Double Tap Toque duas vezes no item rapidamente. Aumentar ou diminuir o zoom em estágios.
Hold Pressione e mantenha o dedo no local por um certo tempo. Abrir o menu específico de contexto, com a mesma função de um clique com o botão direito do mouse.
Drag Coloque o dedo na tela e mantenha o contato enquanto o movimenta. Percorrer telas e menus em um ritmo controlado.
Flick Deslize o dedo rapidamente a direção em que deseja mover a tela. Percorrer menus ou páginas rapidamente ou permite o deslocamento horizontal nas centrais.

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.

Criação do projeto GestosApp no Visual Studio

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.

Imagem da aplicação em funcionamento

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.

Imagem da aplicação em funcionamento com o fundo alterado

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

Assista ao nosso curso de Windows Phone

Leia mais sobre o Windows Phone

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?