Xamarin Forms - Apresentando a view ImageButton

  Hoje vou apresentar a view ImageButton do Xamarin Forms.

Se você não conhece o Xamarin Forms visite a seção Xamarin Forms do site onde vai encontrar dezenas de artigos apresentando os principais recursos dessa tecnologia.

A view ImageButton exibe uma imagem e responde a um toque ou clique que direciona um aplicativo para executar uma tarefa específica.

O ImageButton exibir combina a view Button e a view Image para criar um botão cujo conteúdo é uma imagem. O usuário pressiona o ImageButton com um dedo ou clica nele com o mouse para direcionar o aplicativo para executar uma tarefa específica. No entanto, ao contrário da view Button a view ImageButton não tem nenhum conceito de texto e a aparência do texto.

Nota: A view Button possui a propriedade Image que se destina a exibir um pequeno ícono ao lado do texto do Button.

A view ImageButton define uma propriedade Source que deve ser definida para uma imagem que voce deseja exibir no botão, sendo que a origem da imagem pode ser um arquivo arquivo, uma URI, um recurso ou um stream.

Além das propriedades que ImageButton herda da classe View, ela também define várias propriedades que afetam sua aparência:

A propriedade Aspect pode ser definida para um dos membros da enumeração Aspect com os seguintes valores:

Além disso ImageButton possui as propriedades Margin e Padding que controlam o comportamento de layout da view.

Então vamos à parte prática...

Recursos usados:

Criando o projeto no Visual Studio 2017 Community

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_ImageButton;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Preparando a imagem para ser exibida no Android

Para exibir imagens locais os arquivos de imagens locais possuem pastas específicas da plataforma em seus respectivos projetos. O Android :

Então vamos incluir na pasta Resources/drawable do projeto Android a imagem que vamos usar no ImageButton. Eu vou usar a imagem maco10.gif mas fique a vontade para usar a imagem que você desejar.

Definindo o código da página MainPage

Abra o arquivo MainPage.xaml e inclua o código abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_ImageButton"
             x:Class="XF_ImageButton.MainPage">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <ImageButton Source="maco10.gif"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Por padrão, o ImageButton é retangular, mas você pode atribuir os cantos arredondado usando a propriedade CornerRadius.

Vamos agora definir um evento Clicked que vai ser acionado quando o usuário toca no ImageButton com o dedo ou mouse. Para responder aos toques a propriedade IsEnabled deve estar definida como true.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_ImageButton"
             BackgroundColor="Cyan"
             x:Class="XF_ImageButton.MainPage">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label x:Name="lblClick"
               Text="0 ImageButton clique"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <ImageButton Source="maco10.gif"
                    CornerRadius="20"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnImageButtonClicked"/>
    </StackLayout>
</ContentPage>

A seguir abra o arquivo MainPage.xaml.cs e inclua o código que define o evento Clicked:

using System;
using Xamarin.Forms;
namespace XF_ImageButton
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        int clickTotal;
        void OnImageButtonClicked(object sender, EventArgs e)
        {
            clickTotal += 1;
            lblClick.Text = $"{clickTotal} ImageButton 
clique{(clickTotal == 1 ? "" : "s")}";
        }
    }
}

Podemos realizar o tratamento do click do usuário sem usar o evento Clicked. Para isso podemos usar o  mecanismo de notificação alternativo chamado command ou commanding interface. Isso consiste em duas propriedades:

Essa abordagem é adequada em conexão com a vinculação de dados e especialmente quando a implementação da arquitetura do Model-View-ViewModel (MVVM).

Pegue o projeto compartilhado aqui: XF_ImageButton.zip

"Porque há um só Deus, e um só Mediador entre Deus e os homens, Jesus Cristo homem."
1 Timóteo 2:5
 

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 ?


Referências:

José Carlos Macoratti