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 ?

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:

• Visual Studio Community 2015

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:

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:

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.