Associação de dados do Windows e MVVM

O MVVM (Model-View-ViewModel) é um padrão de design de arquitetura da interface do usuário que separa a interface do usuário e o código que não é da interface do usuário. Saiba como o MVVM permite o acoplamento flexível usando a associação de dados no XAML para sincronizar a interface do usuário e os dados, melhorando a manutenção e reduzindo as dependências.

Como ele fornece acoplamento flexível, o uso da associação de dados reduz as dependências rígidas entre diferentes tipos de código. Essa abordagem facilita a alteração de unidades de código individuais (métodos, classes, controles e assim por diante) sem causar efeitos colaterais não intencionais em outras unidades. Essa desassociação é um exemplo da separação de preocupações, que é um conceito importante em muitos padrões de design.

Dica

Quando usar o MVVM: Use o MVVM para aplicativos com fluxos de dados complexos, várias telas ou bases de código desenvolvidas pela equipe. Para ferramentas simples de página única ou protótipos, o code-behind é aceitável: você pode adotar o MVVM incrementalmente à medida que a complexidade aumenta. Se o seu aplicativo tiver lógica de negócios passível de testes unitários, o MVVM permitirá testar essa lógica sem executar a interface do usuário.

Benefícios do MVVM

Desacoplar seu código tem muitos benefícios, incluindo:

• Habilitando um estilo de codificação exploratório e iterativo. A alteração isolada é menos arriscada e mais fácil de experimentar.
• Simplificando o teste de unidade. Você pode testar unidades de código isoladas umas das outras individualmente e fora dos ambientes de produção.
• Suporte à colaboração em equipe. Indivíduos ou equipes separados podem desenvolver código desacoplado que adere a interfaces bem projetadas e integre-o posteriormente.
• Melhorando a manutenibilidade. Corrigir bugs no código desacoplado é menos provável que cause regressões em outro código.

Em contraste com o MVVM, um aplicativo com uma estrutura mais convencional de "code-behind" normalmente usa a vinculação de dados para exibição de dados. Ele responde à entrada do usuário manipulando diretamente eventos expostos por controles. Os manipuladores de eventos são implementados em arquivos code-behind (como MainWindow.xaml.cs) e geralmente são firmemente acoplados aos controles. Normalmente, eles contêm código que manipula a interface do usuário diretamente. Essa estrutura torna difícil ou impossível substituir um controle sem precisar atualizar o código de tratamento de eventos. Com essa arquitetura, os arquivos code-behind geralmente acumulam código que não está diretamente relacionado à interface do usuário, como o código de acesso ao banco de dados, que acaba sendo duplicado e modificado para uso com outras janelas.

Camadas de aplicativo

Ao usar o padrão MVVM, divida seu aplicativo nas seguintes camadas:

• A camada de modelo define os tipos que representam seus dados de negócios. Essa camada inclui tudo o que é necessário para modelar o domínio principal do aplicativo e geralmente inclui a lógica principal do aplicativo. Essa camada é completamente independente das camadas de modo de exibição e de modelo de exibição e geralmente reside parcialmente na nuvem. Dada uma camada de modelo totalmente implementada, você poderá criar vários aplicativos cliente diferentes se desejar, como o SDK do Aplicativo windows e aplicativos Web que funcionam com os mesmos dados subjacentes.
• A camada de exibição define a interface do usuário usando a marcação XAML. A marcação inclui expressões de associação de dados (como x:Bind) que definem a conexão entre componentes específicos da interface do usuário e vários membros de modelo e modelo de exibição. Às vezes, você pode usar arquivos code-behind como parte da camada de exibição para conter código adicional necessário para personalizar ou manipular a interface do usuário ou extrair dados de argumentos do manipulador de eventos antes de chamar um método view-model que executa o trabalho.
• A camada de modelo de exibição fornece destinos de associação de dados para a exibição. Em muitos casos, o modelo de exibição expõe o modelo diretamente ou fornece membros que encapsulam membros específicos do modelo. O modelo de exibição também pode definir membros para manter o controle de dados relevantes para a interface do usuário, mas não para o modelo, como a ordem de exibição de uma lista de itens. O modelo de exibição também serve como um ponto de integração com outros serviços, como o código de acesso a dados. Para projetos simples, talvez você não precise de uma camada de modelo separada, mas apenas um modelo de exibição que encapsula todos os dados necessários.

MVVM básico e avançado

Assim como acontece com qualquer padrão de design, há mais de uma maneira de implementar o MVVM e muitas técnicas diferentes são consideradas parte do MVVM. Por esse motivo, há várias estruturas MVVM de terceiros diferentes que dão suporte a várias plataformas baseadas em XAML, incluindo o SDK do Aplicativo do Windows. No entanto, essas estruturas geralmente incluem vários serviços para implementar a arquitetura desacoplado, tornando a definição exata do MVVM um pouco ambígua.

Embora estruturas MVVM sofisticadas possam ser muito úteis, especialmente para projetos de escala empresarial, normalmente há um custo associado à adoção de qualquer padrão ou técnica específico, e os benefícios nem sempre são claros, dependendo da escala e do tamanho do seu projeto. Felizmente, você pode adotar apenas as técnicas que fornecem um benefício claro e tangível, e ignorar outras pessoas até precisar delas.

Em particular, você pode obter muito benefício simplesmente compreendendo e aplicando todo o poder da associação de dados e separando a lógica do aplicativo nas camadas descritas anteriormente. Isso pode ser feito usando apenas os recursos fornecidos pelo SDK do Aplicativo do Windows e sem usar nenhuma estrutura externa. Em particular, a extensão de marcação {x:Bind} torna a associação de dados com um desempenho mais fácil e superior do que nas plataformas XAML anteriores, eliminando a necessidade de grande parte do código clichê necessário anteriormente.

Para obter orientações adicionais sobre como usar o MVVM, consulte a biblioteca MVVM CommunityToolkit , que fornece classes base como ObservableObject e RelayCommand, juntamente com geradores de origem (via [ObservableProperty] e [RelayCommand] atributos) que eliminam código clichê. A Galeria WinUI também demonstra a associação de dados e os padrões MVVM com o WinUI 3.

Exemplo de CommunityToolkit.Mvvm

O exemplo a seguir mostra um ViewModel completo usando geradores de origem CommunityToolkit.Mvvm 8.x. O [ObservableProperty] atributo gera a propriedade e altera a notificação e [RelayCommand] gera a ICommand implementação:

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class CustomerViewModel : ObservableObject
{
    private readonly ICustomerService _customerService;

    public CustomerViewModel(ICustomerService customerService)
    {
        _customerService = customerService;
    }

    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SaveCommand))]
    private string _name = string.Empty;

    [ObservableProperty]
    private bool _isBusy;

    [RelayCommand(CanExecute = nameof(CanSave))]
    private async Task SaveAsync()
    {
        IsBusy = true;
        await _customerService.SaveAsync(Name);
        IsBusy = false;
    }

    private bool CanSave() => !string.IsNullOrWhiteSpace(Name);
}

Associe este ViewModel a uma página usando {x:Bind}:

<Page x:Class="MyApp.Views.CustomerPage"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <TextBox Text="{x:Bind ViewModel.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <Button Content="Save" Command="{x:Bind ViewModel.SaveCommand}" />
        <ProgressRing IsActive="{x:Bind ViewModel.IsBusy, Mode=OneWay}" />
    </StackPanel>
</Page>

O code-behind da página expõe a propriedade ViewModel, que {x:Bind} referencia:

// CustomerPage.xaml.cs
public sealed partial class CustomerPage : Page
{
    public CustomerViewModel ViewModel { get; }

    public CustomerPage()
    {
        // Resolve via DI; see Architecture patterns for WinUI 3 desktop apps
        // for how to configure App.GetService<T>() with Microsoft.Extensions.DependencyInjection.
        ViewModel = App.GetService<CustomerViewModel>();
        InitializeComponent();
    }
}

Para obter diretrizes sobre como combinar MVVM com injeção de dependência, configuração e padrões corporativos, consulte padrões de arquitetura para aplicativos da área de trabalho do WinUI 3.

Consulte também

Tópicos

Vinculação de dados em profundidade
Extensão de marcação {x:Bind}
Dicas de desempenho do MVVM para aplicativos WinUI
Padrões de arquitetura para aplicativos da área de trabalho do WinUI 3

Recursos do WinUI 3 e do MVVM

Documentação do CommunityToolkit MVVM
Galeria do WinUI – exemplos de associação de dados
Template Studio para WinUI