Xamarin Rocket #7 — Gestos

Thiago Bertuzzi

May 2, 2019·3 min read

Fala galera,

Tentando manter a periodicidade semanal chegamos novamente com uma dica rápida de Xamarin.Forms!

A ideia é ser um artigo bem rápido e todas as dicas vão ficar em um único repositório, se você perdeu algum veja as que ja saíram :

· Xamarin Rocket #1 — LineBreakMode

· Xamarin Rocket #2 — Alterando o espaço das linhas e colunas do Grid

· Xamarin Rocket #3 — Tela Cheia, ocultando a barra de status

· Xamarin Rocket #4 — Imagens em botões

· Xamarin Rocket #5 — Notificação ao alterar a conexão

· Xamarin Rocket #6 — Como utilizar o GridLayout

Arrastar, dar zoom, movimento pinça.. diversos gestos que fazemos em muitos dos apps do nosso dia a dia.

A utilização de gestos se mostra muito útil, como dar zoom em uma imagem por exemplo (Veja como dar zoom em imagens clicando aqui ).

Xamarin.Forms da suporte a diversos gestos muito utilizados e a implementação dos mesmos é muito simples. Então sem mais texto introdutório, vamos ver alguns deles :

Antes vamos preparar nosso APP adicionando duas propriedades doubles auxiliares no APP.xaml.cs ,para guardarmos o tamanho da tela :

Pronto, vamos aos gestos :

PanGesture : o "gesto de panorâmica" é utilizado para detectar a movimentação dos dedos na tela e mover seu conteúdo. Por exemplo, se temos uma imagem maior que a tela, podemos utilizar esse gesto para percorre-la.

Vamos criar uma classe para encapsular o gesto e utilizarmos como controle :

O evento OnPanUpdated é atualizado toda vez que movermos o conteudo (no caso a imagem ).

Agora vamos implementar o controle e nossa imagem :

Rodando , podemos mover a imagem :

PinchGesture : O famoso movimento pinça, que utilizamos dois dedos e o movimento de abrir e fechar. É muito útil para dar zoom em imagens por exemplo.

Vamos criar uma classe para encapsular o gesto e utilizarmos como controle :

E implementar o controle na Imagem :

Rodando , podemos dar zoom na imagem :

SwipeGesture: O movimento de passar o dedo para executar alguma ação. É possível identificar a direção que o dedo é passado, para cima,para baixo , direta ou esquerda.

Vamos criar uma classe para encapsular o gesto e utilizarmos como controle :

E implementar o controle em um boxView :

E no BackEnd :

Rodando podemos testar passando o dedo no box, ou o cursor no emulador :

TapGesture : o gesto de tocar, com ele podemos executar algum evento quando é tocado em algum controle na tela. Como em uma imagem por exemplo.

Para utilizar basta adicionar a propriedade de gesto no controle desejado, como nessa imagem por exemplo :

Agora no backend vamos implementar um evento para ver quantas vezes foram tocadas na imagem :

Rodando , vamos ficar tocando na imagem :

É uma dica bem simples mas que ajuda muito :D

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!