Neste artigo eu vou tratar de um recurso chamado commanding que permite ao data binding fazer chamada de métodos diretamente para uma ViewModel.

Existe duas formas de fazer o tratamento de eventos quando o usuário clica em um botão ou digita um texto em um controle de entrada de texto.

1- Adicionar um manipulador de eventos no arquivo code-behind tratando o evento;
2- Adicionar uma propriedade Command no XAML e adicionar o manipulador no ViewModel;

A ViewModel é uma classe que orquestra entre a View e Modelo. As ViewModels são projetadas para serem tão simples quanto possível, sem lógica de negócio dentro delas, mas pouca lógica para lidar com o roteamento de mensagens de/para as Views e outros Modelos usados no aplicativos.

A abordagem tradicional para executar um método em resposta a uma interação com a interface do usuário (UI) é chamar o método a partir de um tratamento de evento Clicked de um botão ou Tapped de um TapGestureRecognizer.

Podemos também usar a propriedade Command e fazer chamadas direta para a ViewModel a partir das seguintes classes:

• Button
• MenuItem
• ToolbarItem
• SearchBar
• TextCell
• ImageCell
• ListView
• TapGestureRecognizer

Para suportar esse recurso duas propriedades públicas são definidas na maioria dessas classes:

• Command,  do tipo System.Windows.Input.ICommand.
• CommandParameter,  do tipo object.

Como implementar um Command  ?

Afim de implementar um Command, a ViewModel deverá definir uma ou mais propriedades do tipo ICommand. A interface ICommand define dois métodos e um evento:

public interface ICommand
{
    void Execute(object arg);
    bool CanExecute(object arg)
    event EventHandler CanExecuteChanged;   
}

As classes Command e Command<T> fornecidos pelo Xamarin.Forms implementam a interface ICommand, onde T é o tipo dos argumentos para Execute e CanExecute.

Bem como implementar a interface ICommand, essas classes também incluem o método ChangeCanExecute, que faz com que o objeto Command dispare o evento CanExecuteChanged.

Dentro de um ViewModel, deve haver um objeto do tipo Command ou Command<T> para cada propriedade pública no ViewModel do tipo ICommand.

O construtor de Command ou Command<T> requer um objeto Action de retorno, que é chamado quando o botão chama o método ICommand.Execute.

O método CanExecute é um parâmetro de construtor opcional, e toma a forma de um Func que retorna um booleano.

Entendeu ???

Vamos ver um exemplo prático.

Xamarin Forms - Implementando um Comando

Abra o Visual Studio Community 2015 e clique em New Project;

Selecione Visual C#, o template Cross Plataform e a seguir Blank App (Xamarin.Forms Portable);

Informe o nome CommandDemo1 e clique no botão OK;

Incluindo uma nova página XAML no projeto : Pagina1.axml

Selecione o projeto compartilhado (PCL) e no menu Project clique em Add New Item;

Selecione o template Cross Plataform -> Forms Xaml Page e informe o nome Pagina1.xaml e clique em Add;

Dessa forma temos a página onde vamos implementar o Command.

Antes de prosseguir abra o arquivo App.cs e altere o código do construtor conforme abaixo:

        public App()
        {
            // The root page of your application
            var content = new Pagina1();
        }

Agora abra o arquivo Pagina1.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"
             x:Class="AppCommand1.Pagina1">

    <StackLayout Padding="0,20,0,0">

        <Label Text="Demo de uso de Command" FontAttributes="Bold" 
               HorizontalOptions="Center" />

        <StackLayout Orientation="Horizontal">
            <Label Text="Digite um número:" FontSize="Large" />
            <Entry Text="{Binding Numero}" WidthRequest="100" FontSize="Large" />
        </StackLayout>
        

        <Button Text="Calcular a Raiz Quadrada" Command="{Binding RaizQuadradaCommand}"
                HorizontalOptions="Center" />
        

        <StackLayout Orientation="Horizontal">
            <Label Text="Raiz Quadrada =" FontSize="Large" />
            <Label Text="{Binding RaizQuadradaResultado}" FontSize="Large"/>
        </StackLayout>

    </StackLayout>

</ContentPage>

Neste código temos estamos usando somente o layout StackLayout para empilhar as views na página. A primeira verticalmente e as outras duas horizontalmente.

Estamos usando também as views:

• Label - para exibir texto;
• Entry - para permitir que o usuário digite/edite texto;

O data binding esta ocorrendo na propriedade Text das views Entry e Label. Logo elas são o destino da ligação.

Para mostrar isso estamos usando a extensão de marcação Binding entre colchetes seguido do nome do objeto origem:  {Binding nome_origem}

Agora observe que na view Button estamos definindo uma propriedade Command : Command="{Binding RaizQuadradaCommand}"

Precisamos definir uma  ViewModel, chamada DemoViewModel, e implementar as propriedades e o método que desejamos executar, no caso CalculaRaizQuadra,  que será chamado pela instância da classe Command que é do tipo ICommand.

No menu Project clique em Add Class e informe o nome DemoViewModel.cs.

A seguir vamos definir as propriedades Numero e RaizQuadradaResultado que representam o número informado na View Entry o resultado do cálculo exibido na view Label.

Precisamos também definir um comando RaizQuadradaCommand usando a interface ICommand para representar a ação associado ao Button.

using System;
using System.ComponentModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace AppCommand1
{
    public class DemoViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public int Numero { get; set; }
        public double RaizQuadradaResultado { get; private set; }
        public ICommand RaizQuadradaCommand { get; private set; }

        public DemoViewModel()
        {
            Numero = 25;
            RaizQuadradaCommand = new Command(CalculaRaizQuadrada);
        }

        void CalculaRaizQuadrada()
        {
            RaizQuadradaResultado = Math.Sqrt(Numero);
            OnPropertyChanged("RaizQuadradaResultado");
        }

        protected virtual void OnPropertyChanged(string propertyName)
        {
            var changed = PropertyChanged;
            if (changed != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Observe que a nossa ViewModel implementa a interface INotifyPropertyChanged para notificar a View das alterações ocorridas no resultado da raiz quadrada.

A ViewModel implementa o cálculo da raiz quadrada no método CalculaRaizQuadrada usando a proprieda Numero e atribui o resultado á propriedade RaziQuadradaResultado.

Quando o botão for clicado ele chama o método ICommand.Execute do objeto vinculado a sua propriedade Command.

Dessa forma o método CalcularRaizQuadrada será chamado com o valor da propriedade Numero sendo usada para fazer o cálculo.

A raiz quadrada deste valor será calculada e a Label que esta vinculada à propriedade RaizQuadradaResultado será atualizada com o resultado.

Antes de executar o projeto temos que vincular a ViewModel com a View e podemos fazer isso definindo uma instância da ViewModel atribuindo-a ao BindingContext da ContentPage no code-behind.

Abra o arquivo Pagina1.xaml.cs e definda o código abaixo :

    public partial class Pagina1 : ContentPage
    {
        public RaizQuadradaPage()
        {
            InitializeComponent();
            this.BindingContext = new DemoViewModel ();
        }
    }

Executando o projeto e alterando e digitando valores na interface veremos o resultado ser exibido nas Label.