Vinculação de dados do Windows e MVVM

Model-View-ViewModel (MVVM) é um padrão arquitetural para interfaces de usuário que dissocia o código UI do código não-UI. Saiba como o MVVM permite o acoplamento flexível usando a vinculação de dados em XAML para sincronizar a interface do usuário e os dados, melhorando a capacidade de manutenção e reduzindo as dependências.

Como fornece acoplamento flexível, o uso da vinculação de dados reduz as dependências rígidas entre diferentes tipos de código. Esta abordagem torna mais fácil alterar unidades de código individuais (métodos, classes, controles e assim por diante) sem causar efeitos colaterais não intencionais em outras unidades. Esta dissociação é um exemplo da separação de preocupações, que é um conceito importante em muitos padrões de design.

Benefícios do MVVM

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

• Permitindo um estilo de codificação iterativo e exploratório. A mudança isolada é menos arriscada e mais fácil de experimentar.
• Simplificação dos testes unitários. Você pode testar unidades de código que são isoladas umas das outras individualmente e fora dos ambientes de produção.
• Apoio à colaboração em equipa. Indivíduos ou equipes separadas podem desenvolver código dissociado que adere a interfaces bem projetadas e integrá-lo mais tarde.
• Melhorar a capacidade de manutenção. A correção de bugs no código desacoplado tem menos probabilidade de causar regressões em outro código.

Em contraste com o MVVM, uma aplicação com uma estrutura "code-behind" mais convencional normalmente usa a vinculação de dados para exibição única. Ele responde à entrada do usuário manipulando diretamente os eventos expostos pelos controles. Os manipuladores de eventos são implementados em arquivos code-behind (como MainWindow.xaml.cs) e geralmente são fortemente acoplados aos controles. Eles geralmente contêm código que manipula a interface do usuário diretamente. Essa estrutura torna difícil ou impossível substituir um controle sem ter que atualizar o código de manipulação 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 aplicação

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

• A camada de modelo define os tipos que representam seus dados corporativos. Essa camada inclui tudo o que é necessário para modelar o domínio principal do aplicativo e, muitas vezes, inclui a lógica principal do aplicativo. Essa camada é completamente independente das camadas de exibição e modelo de visualização e geralmente reside parcialmente na nuvem. Dada uma camada de modelo totalmente implementada, você pode criar vários aplicativos cliente diferentes, se desejar, como o SDK de aplicativos do Windows e aplicativos Web que funcionam com os mesmos dados subjacentes.
• A camada de exibição define a interface do usuário usando marcação XAML. A marcação inclui expressões de vinculação de dados (como x:Bind) que definem a conexão entre componentes específicos da interface do usuário e vários membros do modelo de exibição e do modelo. À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 para extrair dados de argumentos do manipulador de eventos antes de chamar um método de modelo de exibição que executa o trabalho.
• A camada view-model fornece destinos de vinculação de dados para a exibição. Em muitos casos, o modelo de visualizaçã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 visualização também serve como um ponto de integração com outros serviços, como código de acesso a dados. Para projetos simples, talvez você não precise de uma camada de modelo separada, mas apenas de um modelo de exibição que encapsula todos os dados necessários.

MVVM básico e avançado

Como em 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 suportam as várias plataformas baseadas em XAML, incluindo o SDK de Aplicativo do Windows. No entanto, essas estruturas geralmente incluem vários serviços para implementar arquitetura dissociada, tornando a definição exata de MVVM um tanto 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ífica, 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 os outros até que você precise deles.

Em particular, você pode obter muitos benefícios simplesmente entendendo e aplicando todo o poder da vinculação de dados e separando a lógica do seu aplicativo nas camadas descritas anteriormente. Isso pode ser feito usando apenas os recursos fornecidos pelo SDK do Aplicativo Windows e sem usar estruturas externas. Em particular, a extensão de marcação {x:Bind} torna a vinculação de dados mais fácil e de melhor desempenho do que em plataformas XAML anteriores, eliminando a necessidade de muito do código clichê exigido anteriormente.

Para obter orientações adicionais sobre como usar MVVM básico e pronto para uso, confira o Exemplo de UWP do banco de dados de pedidos de clientes no GitHub. Muitas das outras amostras de aplicações UWP também usam uma arquitetura MVVM simples, e a Aplicação de Tráfego UWP inclui versões de code-behind e MVVM, com notas descrevendo a conversão MVVM.

Consulte também

Tópicos

Vinculação de dados em profundidade
{x:Bind} extensão de marcação

Exemplos de MVVM da UWP

Exemplo de banco de dados de pedidos de clientes
Amostra de inventário VanArsdel
Exemplo de aplicativo de tráfego