Xamarin.Forms - Apresentando a view Image - II
Neste artigo vou apresentar a view Image do Xamarin.Forms apresentando seus principais recursos e mostrando como tornar uma imagem clicável com GestureRecognizer.

No artigo anterior apresentei algumas das propriedades da view Image mostrando como podemos exibir imagens locais e remotas.

Neste artigo vou mostrar como tornar uma imagem clicável usando os recursos da classe GestureRecognizer.

A view Image não possui um evento de clique ou toque que podemos usar para interação com o usuário.

Para podermos obter uma interação com a view Image podemos adicionar o gesto de toque à view de forma que ele seja utilizado para detecção de toque.

O gesto de toque é implementado usando a classe TapGestureRecognizer. (Nota : esse recurso pode ser adicionar a outras views)

Para tornar um elemento de interface do usuário clicável com o gesto de toque fazemos assim:

  1. Criamos uma instância da classe TapGestureRecognizer;
  2. Manipulamos o evento Tapped ;
  3. Adicionamos o novo reconhecedor de gesto para a coleção de GestureRecognizers sobre o elemento de interface do usuário;
Exemplo :
1    var tapGestureRecognizer = new TapGestureRecognizer();
  
2   tapGestureRecognizer.Tapped += (s, e) => {
        // código para executar após o toque
     };

3   image.GestureRecognizers.Add(tapGestureRecognizer);

Por padrão a imagem irá responder a um único toque.

Para alterar esse comportamento configure a propriedade NumberOfTapsRequired para aguardar um toque duplo (ou mais toques se necessário).

tapGestureRecognizer.NumberOfTapsRequired = 2;    // toque duplo

Quando NumberOfTapsRequired for definido com um valor acima de um, o manipulador de eventos será executado somente se os toques ocorrerem dentro de um determinado período de tempo (este período não é configurável). Se o segundo (e os demais) toque ocorrer dentro deste prazo eles são ignorados e a contagem é reiniciada.

Um reconhecedor de toque pode ser adicionado a um controle via código XAML usando propriedades anexadas.

A sintaxe para adicionar um TapGestureRecognizer a uma imagem pode ser vista a seguir:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App_Image.Pagina1">

  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

    <Image Source="maco1b.jpg">
        <Image.GestureRecognizers>
            <TapGestureRecognizer
                    Tapped="OnTapGestureRecognizerTapped"
                    NumberOfTapsRequired="2" />
      </Image.GestureRecognizers>
    </Image>
  </StackLayout>
</ContentPage>

Como exemplo vamos implementar um reconhecedor de toque à uma imagem de forma a oferecer uma melhor experiência ao usuário.

Requisitos necessários :

Tornando uma imagem clicável com GestureRecognizer

Abra o projeto App_Image  criado no artigo anterior.

Agora abra o arquivo App.cs do projeto App.Image e altere o código conforme abaixo:

using System.Threading.Tasks;
using Xamarin.Forms;
namespace App_Image
{
    public class App : Application
    {
        public App()
        {
            Image imagemMonkey = new Image
            {
                Source = "monkey.png",
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.End,
                VerticalOptions = LayoutOptions.Fill
            };
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += async (s, e) =>
            {
                imagemMonkey.Opacity = .5;
                await Task.Delay(1000);
                imagemMonkey.Opacity = 1;
            };
            imagemMonkey.GestureRecognizers.Add(tapGestureRecognizer);
            MainPage = new ContentPage
            {
                BackgroundColor = Color.Silver,
                Content = new StackLayout
                {
                    Spacing = 0,
                    VerticalOptions = LayoutOptions.Center,
                    Orientation = StackOrientation.Vertical,
                    Children = { imagemMonkey }
                }
           };           
        }
        protected override void OnStart()
        {
            // Handle when your app starts
        }
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

No código estamos tornando a imagem clicável e no manipulador de evento Tapped estamos usando a propriedade Opacity da imagem e os comandos ascyn e await para que a ação do delay seja executada de forma assíncrona.

Assim ao clicar na imagem ela escurecerá e após 1 segundo retornará a sua opacidade normal provocando a sensação de estar respondendo ao toque.

Executando o projeto iremos obter a primeira imagem, e, após clicar, veremos a segunda, que após 1 segundo retorna ao normal.

Pegue o projeto aqui :  App_Image2.zip (sem as referências)

Deus nunca foi visto por alguém. O Filho unigênito (Jesus), que está no seio do Pai, esse o revelou.
João 1:18

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

     Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti