Xamarin Forms - MVVM, DataBinding e a interface ICommand - III


  Neste artigo vou apresentar os principais conceitos sobre MVVM, DataBinding e da interface ICommand : Como passar parâmetros para um comando.

Até o momento já sabemos como executar ações na ViewModel a partir da View usando a interface ICommand.

Mas e se você precisar passar informações da View para métodos definidos via ICommand na ViewModel ?

É isso que irei abordar neste artigo.

Pois bem, já vimos que para definir comandos usamos a interface ICommand, e que as classes Command e Command<T> fornecidas pelo Xamarin.Forms implementam a interface ICommand, onde T é o tipo dos argumentos para Execute e CanExecute.

Assim, vimos que dentro de um ViewModel, deve haver um objeto do tipo Command ou Command<T> para cada propriedade pública na 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.

Então como podemos passar um parâmetro para um Command ?

Um parâmetro pode ser passado para um método ICommand.Execute usando a classe Command <T> para instanciar o comando.

Nada melhor que um exemplo prático para entender como isso funciona na prática.

Vamos criar uma aplicação que calcula a raiz quadrada de um valor que será passado para o comando como um parâmetro.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Passando parâmetros para um Comando : Criando o projeto e definindo a View e a ViewModel

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 XF_ParametrosCommand e clique no botão OK;

Agora crie no projeto as pastas Views e ViewModels que irão conter a View e a ViewModel.

A seguir inclua na pasta Views a página RaizQuadradaPage.xaml que vai representar a View da nossa aplicação.

No menu Project clique em Add New Item e a seguir em Cross Platform e em Forms Xaml Page e informe o nome RaizQuadradaPage.xaml.

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
           MainPage = new NavigationPage(new RaizQuadradaPage());
        }

Assim definimos a nossa página como a principal.

Vamos criar uma classe em nosso projeto, na pasta ViewModels, que irá conter o código responsável pela criação e apresentação da view.

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

Definindo o código da ViewModel

Agora precisamos definir na ViewModel as propriedades e métodos necessários para criar a nossa view.

Nossa View vai precisar informar um número, ter um botão de comando que ao ser clicado irá disparar uma ação para realizar o cálculo da raiz quadrada e deverá exibir o resultado.

Assim para criar essa view vamos precisar definir a propriedade para tratar com o resultado do cálculo e um comando para executar uma ação do usuário.

  1. A propriedade RaizQuadradaResultado que irá receber o resultado do cálculo da raiz quadrada;
  2. Um comando RaizQuadradaCommand que irá realizar o cálculo da raiz quadrada;

Além disso a nossa ViewModel vai precisar implementar a interface INotifyPropertyChanged para notificar a View das alterações.

Então o código da classe RaizQuadradaViewModel deve ficar assim:

using System;
using System.ComponentModel;
using System.Windows.Input;
using Xamarin.Forms;
namespace XF_ParametroCommand.ViewModels
{
    public class RaizQuadradaViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            var changed = PropertyChanged;
            if (changed != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public double RaizQuadradaResultado { get; private set; }
        public ICommand RaizQuadradaCommand { get; private set; }
        public RaizQuadradaViewModel()
        {
            RaizQuadradaCommand = new Command<string>(CalculaRaizQuadrada);
        }
        void CalculaRaizQuadrada(string valor)
        {
            double numero = Convert.ToDouble(valor);
            RaizQuadradaResultado = Math.Sqrt(numero);
            OnPropertyChanged("RaizQuadradaResultado");
        }
    }
}

Você percebeu que o número que será informado pelo usuário na view esta sendo passado como parâmetro para o nosso Command definido na ViewModel ?

Isso esta sendo feito na instanciação do comando no construtor da classe ViewModel:

RaizQuadradaCommand = new Command<string>(CalculaRaizQuadrada);

Estamos definindo o Command<T> onde  T é a string que representa o valor informando pelo usuário na View que iremos criar a seguir.

Na implementação do comando - CalculaRaizQuadrada - recebemos o valor como string, convertemos para double, calculamos o valor da raiz quadrada e notificamos a view das alterações:

       void CalculaRaizQuadrada(string valor)
        {
            double numero = Convert.ToDouble(valor);
            RaizQuadradaResultado = Math.Sqrt(numero);
            OnPropertyChanged("RaizQuadradaResultado");
        }

Definindo o código da View

Agora abra o arquivo RaizQuadradaPage.xaml na pasta Views 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="XF_ParametroCommand.Views.RaizQuadradaPage"
             Title="Raiz Quadrada">
    <StackLayout Padding="5">
    
        <StackLayout Orientation="Horizontal">
            <Label Text="Digite um número:" FontSize="Large" />
            <Entry x:Name="txtNumero" 
                      WidthRequest="100" 
                      FontSize="Large" />
        </StackLayout>
        <Button Text="Calcular a Raiz Quadrada" 
                HorizontalOptions="Center"
                Command="{Binding RaizQuadradaCommand}"
                CommandParameter="{Binding Source={x:Reference txtNumero}, Path=Text}" />
        <Frame BackgroundColor="Yellow">
           <StackLayout Orientation="Horizontal">
              <Label Text="Raiz Quadrada =" FontSize="Large" />
              <Label Text="{Binding RaizQuadradaResultado}" FontSize="Large"/>
           </StackLayout>
        </Frame>
    </StackLayout>
</ContentPage>

Vamos entender o código:

Estamos usando o StackLayout para empilhar as views na página definindo o layout que é mostrado na figura ao lado.

1 - Definimos a view Entry onde atribuimos o nome txtNumero ao atributo x:Name pois vamos precisar informar para o parâmetro usando no comando de onde vem o valor informado.

2- No Button definimos duas propriedades usando o databinding:

Command :  Command="{Binding RaizQuadradaCommand}"

Aqui estamos vinculando o comando RaizQuadradaCommand definido na ViewModel ao Button de forma que quando ele for clicado esse comando será acionado;

CommandParameter :  CommandParameter="{Binding Source={x:Reference txtNumero}, Path=Text}"

Aqui estamos configurando o parâmetro que será passado para o Command (o Text da view Entry) usando o CommandParameter do Button.

Para isso estou informando o identificador da View - txtNumero - de onde vem o parâmetro e o valor que queremos passar que é o - Text - desta view que foi definida no Path.

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 RaizQuadradaPage.xaml.cs e definda o código abaixo :

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

Agora, é só alegria...

Executando o projeto iremos obter:

Dessa forma vimos como passar parâmetros para comandos criados na ViewModel usando a interface ICommand.

Pegue o código das views e da ViewModel aqui:   XF_ParametroCommand.zip

Jesus lhes respondeu, e disse: A minha doutrina não é minha, mas daquele que me enviou.
Se alguém quiser fazer a vontade dele, pela mesma doutrina conhecerá se ela é de Deus, ou se eu falo de mim mesmo.

João 7:16-17

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