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.
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, o 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. Já 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, que 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.
- A propriedade RaizQuadradaResultado que irá receber o resultado do cálculo da raiz quadrada;
- 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 está sendo passado como parâmetro para o nosso Command definido na ViewModel?
Isso é 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 acima.
Definimos a view Entry, onde atribuímos o nome txtNumero ao atributo x:Name, pois vamos precisar informar para o parâmetro usando no comando de onde vem o valor informado.
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