Usar os comandos em um viewmodel

Você viu como obter dados de seus viewmodels para sua interface do usuário e como usar vinculação bidirecional para obter dados de volta nos seus viewmodels.

Usar associações bidirecionais como essa é a maneira preferencial de reagir às alterações da interface do usuário sempre que os dados forem alterados. Muitas coisas que lidaríamos como eventos podem ser tratadas usando associações bidirecionais e o padrão MVVM (Model-View-ViewModel). Outros exemplos são coisas como Switch.IsToggled e Slider.Value, que podem ser refletidas no nosso viewmodel como um valor booliano ou inteiro, sem ter que usar eventos.

Mas há algumas coisas como uma ativação Button ou MenuItem que não estão vinculadas diretamente à alteração de dados. Essas interações ainda requerem o tratamento semelhante a eventos. Como esses componentes de interface do usuário geralmente invocam algum tipo de lógica com os dados, queremos que essa lógica esteja no viewmodel. Mas não queremos tratá-los como eventos Clicked e Selected no code-behind, se possível. Queremos o máximo possível no viewmodel, dessa forma ele é testável.

Usar o padrão de comando

Muitos dos controles do .NET MAUI que têm esse tipo de interação dão suporte para associação a uma propriedade que expõe uma interface ICommand. Essa propriedade provavelmente tem o nome Command. O controle Button é um exemplo:

<Button Text="Give Bonus" Command="{Binding GiveBonusCommand}" />

O controle sabe quando invocar o comando. Por exemplo, um botão invoca o comando quando é pressionado. Neste exemplo, o comando está associado à propriedade GiveBonus do viewmodel. O tipo de propriedade deve implementar a interface ICommand. O código seria semelhante a esse exemplo:

public class EmployeeViewModel : INotifyPropertyChanged
{
    public ICommand GiveBonusCommand {get; private set;}
    ...
}

A interface ICommand tem um método Execute que é chamado quando o botão é clicado. Dessa forma, o ICommand.Execute diretamente substitui o código de manipulação de eventos Button.Click.

A interface completa ICommand possui dois métodos adicionais: CanExecute e CanExecuteChanged, que são usados para determinar se um controle deve aparecer habilitado ou desabilitado.

Um botão, por exemplo, poderá aparecer esmaecido se CanExecute retornar false.

Aqui está como a interface ICommand se parece em C#:

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

Use a classe Command

Esse padrão de comando permite manter uma separação clara entre o comportamento e a implementação da interface do usuário. No entanto, isso poderá complicar o seu código se for necessário criar uma classe separada para implementar cada manipulador de eventos.

Em vez de criar várias classes personalizadas que implementam a interface, é comum usar Command ou Command<T>. Essas classes implementam ICommand, mas expõem seu comportamento como propriedades no seu viewmodel que você pode definir. Dessa forma, podemos implementar a propriedade GiveBonus descrita anteriormente inteiramente dentro da nossa classe viewmodel:

public class EmployeeViewModel : INotifyPropertyChanged
{
    public ICommand GiveBonusCommand {get; private set;}
    public EmployeeViewModel(Employee model)
    {
        GiveBonusCommand = new Command(GiveBonusExecute, GiveBonusCanExecute)
    }

    void GiveBonusExecute()
    {
        //logic for giving bonus
    }

    bool GiveBonusCanExecute()
    {
        //logic for deciding if "give bonus" button should be enabled.
    }
}

Nesse código, o comportamento Execute é sendo fornecido pelo método GiveBonusExecute. E CanExecute é fornecido por GiveBonusCanExecute. Os itens delegados a esses métodos são passados para o construtor Command. Neste exemplo, não há nenhuma implementação para CanExecuteChanged.

Simplificar com o Kit de Ferramentas do MVVM

A biblioteca MVVM Toolkit contém implementações de ICommand conhecidos como RelayCommand e AsyncRelayCommand. Ele também fornece geradores de origem para simplificar ainda mais esse código. No exemplo a seguir, GiveBonusCommand será gerado, configurando tanto o método para chamar para executar quanto para chamar para ver se ele pode ser executado. O atributo [RelayCommand] é usado no método GiveBonus e gerará o GiveBonusCommand. Além disso, definindo a propriedade CanExecute no atributo como o nome do método que desejamos conectar ao método CanExecute do ICommand, ele gerará o código para configurar isso para nós.

public partial class EmployeeViewModel : ObservableObject
{
    public EmployeeViewModel(Employee model)
    {
    }

    [RelayCommand(CanExecute = nameof(GiveBonusCanExecute))]
    void GiveBonus()
    {
        //logic for giving bonus
    }

    bool GiveBonusCanExecute()
    {
        //logic for deciding if "give bonus" button should be enabled.
        return true;
    }
}

O Kit de Ferramentas MVVM também manipula métodos async, que são comuns na programação do .NET.

Comandos com parâmetros

A interface ICommand aceita um parâmetro object para os métodos CanExecute e Execute. O .NET MAUI implementa essa interface sem verificação de tipo através da classe Command. Os delegados que você anexa ao comando devem fazer sua própria verificação de tipo para garantir que o parâmetro correto seja passado. O .NET MAUI também fornece a implementação Command<T> na qual você define o tipo de parâmetro esperado. Quando você cria um comando que aceita um único tipo de parâmetro, use Command<T>.

Os controles do .NET MAUI que implementam o padrão de comando fornecem a propriedade CommandParameter. Ao definir essa propriedade, você pode passar um parâmetro para o comando quando ele é invocado com Execute, ou quando o comando verifica o método CanExecute para obter o status.

Neste exemplo, o valor da cadeia de caracteres "25" é enviado para o comando:

<Button Text="Give Bonus" Command="{Binding GiveBonusCommand}" CommandParameter="25" />

O comando precisaria interpretar e converter esse parâmetro de cadeia de caracteres. Existem muitas maneiras de fornecer um parâmetro fortemente tipado.

• Em vez de usar a sintaxe de atributo para definir CommandParameter, use elementos XAML.

  <Button Text="Give Bonus" Command="{Binding GiveBonusCommand}">
      <Button.CommandParameter>
          <x:Int32>25</x:Int32>
      </Button.CommandParameter>
  </Button>
  

• Vincule o CommandParameter a uma instância do tipo correto.

• Se o CommandParameter estiver associado ao tipo incorreto, aplique um conversor para converter o valor para o tipo correto.