Passer au contenu principal
Version : 11.0.0

Avalonia UI et MVVM

Sur cette page, vous apprendrez comment le modèle MVVM est réalisé lorsqu'il est utilisé avec Avalonia UI.

Vues et Modèles de Vue

Lorsque vous utilisez le modèle MVVM avec Avalonia UI, vous implémentez une vue avec un fichier AXAML, attaché à un fichier de code-behind correspondant, et un modèle de vue avec un fichier de classe de code classique.

Dans Avalonia UI, une vue est implémentée comme une composition d'éléments d'interface utilisateur dans une fenêtre ou un contrôle utilisateur (deux fichiers AXAML avec code-behind). Les éléments d'interface utilisateur dans une composition peuvent être un mélange de contrôles intégrés à Avalonia UI, de contrôles utilisateur et de contrôles (plus avancés) de votre propre conception et mise en œuvre.

POUR VOTRE INFORMATION

Pour une liste complète des contrôles intégrés à Avalonia UI, consultez la section de référence ici.

POUR VOTRE INFORMATION

Pour en savoir plus sur le concept de composition d'interface utilisateur, consultez ici.

POUR VOTRE INFORMATION

Pour apprendre à concevoir et à mettre en œuvre vos propres contrôles, consultez ici.

Liaison de Données

La liaison de données est la technologie clé qui permet à une application Avalonia UI MVVM de séparer les vues des modèles de vue. Vous pouvez visualiser la relation entre la vue et le modèle de vue comme deux couches connectées par les liaisons de données :

Remarquez comment certaines des liaisons de données sont représentées par une flèche bidirectionnelle et d'autres par une flèche unidirectionnelle. Par exemple, les champs de saisie du nom et de l'adresse sont bidirectionnels - vous voulez que les deux modifications dans le modèle de vue soient notifiées à la vue, et que les entrées de la vue soient mises à jour dans le modèle de vue.

Les boutons, en revanche, ont des commandes unidirectionnelles, émises par la vue et exécutées par le modèle de vue.

Remarquez comment la classe du modèle de vue n'est pas dépendante de la couche de vue, ni de la manière dont elle sera rendue sur la plateforme cible par Avalonia UI. Comme la classe du modèle de vue est indépendante, elle peut être testée unitairement comme n'importe quel autre code.

Lorsque vous utilisez le modèle MVVM en pratique, vous utiliserez un modèle de vue correspondant pour chaque vue, et la classe du modèle de vue contient toute la logique d'application pour la vue.

Le modèle MVVM

Le modèle est l'autre partie du modèle MVVM. Les modèles sont beaucoup moins précisément définis dans le modèle car ils représentent 'le reste de l'architecture'. Il s'agit souvent de stockage de données ou d'autres services.

Le principe important que vous devez maintenir est la séparation. Vous devez mettre en œuvre la relation entre le modèle de vue et le modèle en utilisant une forme de modèle d'injection de dépendance (DI).

ReactiveUI

Il existe plusieurs frameworks conçus pour aider à écrire des applications en utilisant le modèle MVVM.

Dans les pages suivantes, vous apprendrez à connaître le framework ReactiveUI qui est l'un des plus populaires et est pris en charge par l'un des paquets Avalonia UI.