Xamarin Forms – MVVM, DataBinding e a interface ICommand – Parte 02

Neste artigo, vou apresentar os principais conceitos sobre MVVM, DataBinding e da interface ICommand: Implementando o MVVM e definindo um comando.

Na primeira parte do artigo, apresentei os conceitos sobre o MVVM, databinding e ICommand e criei uma aplicação bem simples, sem usar o padrão MVVM. Vamos agora implementar o MVVM e aplicar o databinding, além de definir o comando usando a interface ICommand.

Até o momento, a nossa aplicação possui o desenho abaixo, onde vemos que a lógica de apresentação está no code-behind e temos, assim, um forte acoplamento entre a View e o Model:

Nosso objetivo neste artigo é implementar o padrão MVVM criando a ViewModel, para separar a lógica de apresentação do code-behind:

Recursos usados: Visual Studio Community 2015.

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

Implementando MVVM e definindo um Comando

Abra o projeto criado no artigo anterior no Visual Studio Community 2015. Vamos criar uma classe em nosso projeto que irá conter o código responsável pela criação e apresentação da view MainPage.

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

Precisamos definir nesta classe as propriedades e métodos necessários para criar a nossa view.

Se analisarmos a nossa view, veremos que vamos precisar definir duas propriedades:

1. A propriedade Nome que irá receber o nome informado pelo usuário;
2. A propriedade Mensagem que irá exibir a mensagem de boas vindas.

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

    public class MainPageViewModel 
    {
        //propriedade para o nome
        public string Nome { get; set; }
        //propriedade para a mensagem
        public string Mensagem {get; set; }
        
    }

Mas perceba que a nossa view possui também um botão com um evento definido no code-behind que, ao ser disparado, monta a mensagem e a exibe na Label.

Precisamos, então, definir em nossa ViewModel um comando que irá atuar da mesma forma. É aqui que entra a interface ICommand e a classe Command.

Veja como fica a implementação de um comando que será disparado quando o usuário clicar no botão definido na view:

    public class MainPageViewModel 
    {
        //propriedade para o nome
        public string Nome { get; set; }
        //propriedade para a mensagem
        public string Mensagem {get; set; }        
        public ICommand BoasVindasCommand { get; private set; }
        public MainPageViewModel()
        {
            BoasVindasCommand = new Command(BoasVindasCmd);
        }
        void BoasVindasCmd()
        {
            Mensagem = "Bem-Vindo " + Nome;
        }
    }

Vamos entender o código:

1. Primeiro definimos uma propriedade do tipo ICommand:

public ICommand BoasVindasCommand { get; private set; }

2. Depois criamos uma instância da classe Command onde definimos um delegate que aponta para classe BoasVindasCmd e que irá implementa o nosso comando

BoasVindasCommand = new Command(BoasVindasCmd);

3. Finalmente implementamos o nosso comando:

Mensagem = "Bem-Vindo " + Nome;

Nota: Uma forma mais simplificada de implementar o comando seria assim:

        public Command BoasVindasCommand
        {
            get
            {
                return new Command(() =>
                {
                    Mensagem = "Bem-Vindo " + Nome;
                });
            }
        }

Aplicando o DataBinding

Muito bem. Agora podemos alterar a nossa view e aplicar o DataBinding.

Primeiro, temos que definir como a nossa View vai se comunicar com a nossa ViewModel. Fazemos isso no arquivo code-behind MainPage.xaml.cs definindo o código a seguir:

        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MainPageViewModel();
        }

Criamos uma instância da nossa ViewModel e atribuímos ao BindingContext da ContentPage. Assim, podemos aplicar o databinding na view.

Nota: Poderíamos ter feito essa referência no código XAML.

Veja como ficou a nossa view MainPage após aplicarmos o databinding:

<?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_Apps.AppMvvm1.Views.MainPage">
    
    <StackLayout Spacing="20" VerticalOptions="Center" 
                 HorizontalOptions="Center">
        <Label Text="Xamarin Forms - MVVM" TextColor="Navy" 
               FontSize="20"/>
        <Entry Text="{Binding Nome}" Placeholder="Informe o nome" 
               FontSize="20" />
        <Button Text="Boas Vindas" TextColor="White" 
                BackgroundColor="Teal" 
                FontSize="20"
                Command="{Binding BoasVindasCommand}" />
        <Label Text="{Binding Mensagem}" FontSize="30" 
               TextColor="Red" 
               FontAttributes="Bold" />
    </StackLayout>
    
</ContentPage >

Note que removemos os atributos x:Name das Labels e o evento Clicked do Button, pois não vamos mais precisar deles.

A seguir, implementamos o databinding vinculando a View às propriedades Nome e Mensagem e ao comando BoasVindasCommand:

1. Text=”{Binding Nome}”

2. Text=”{Binding Mensagem}”

3.  Command=”{Binding BoasVindasCommand}”

Dessa forma, podemos remover o evento Clicked que havíamos definido no arquivo code-behind.

Se você executar o projeto neste momento, vai ficar surpreso ao ver que ao clicar no botão a mensagem não será exibida na Label.

Porquê?

Se você definir um breakpoint no comando definido na ViewModel irá constatar que a mensagem está sendo montada, mas não está sendo exibida.

O motivo disso é que a view não foi notificada da alteração da mensagem, ou seja, a propriedade Mensagem foi alterada, mas a view não foi notificada.

Precisamos de alguma forma notificar a view das alterações que ocorrerem nas propriedades definidas na ViewModel.

Para cumprir esse papel precisamos implementar a interface INotifyPropertyChanged em nossa ViewModel e alterar a definição da propriedade Mensagem para que ela notifique a view de qualquer alteração feita.

Vamos, então, fazer isso alterando o código da nossa ViewModel, conforme mostrado a seguir:

public class MainPageViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void Notificar([CallerMemberName] string prop = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
        }
        //propriedade para o nome
        public string Nome { get; set; }      
        //propriedade para a mensagem
        private string _mensagem;
        public string Mensagem
        {
            get { return _mensagem; }
            set
            {
                _mensagem = value;
                Notificar();
            }
        }
        public ICommand BoasVindasCommand { get; private set; }
        public MainPageViewModel()
        {
            BoasVindasCommand = new Command(BoasVindasCmd);
        }
        void BoasVindasCmd()
        {
            Mensagem = "Bem-Vindo " + Nome;
        }
    }

Agora, qualquer alteração na propriedade Mensagem irá disparar o evento para notificar a View que irá exibir a mensagem.

Executando o projeto iremos obter:

Agora, após a implementação da interface INotifyPropertyChanged, a nossa view esta sendo notificada da alteração da propriedade Mensagem e exibe a mensagem na Label- lblMensagem.

Na próxima parte do artigo, veremos como passar parâmetros para métodos na ViewModel.

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