Composition UI
La composition UI est le processus que vous utilisez pour créer les mises en page requises par vos applications. Elle vous permet de construire une vue complexe à partir d'un agencement de composants. Les avantages sont :
- Encapsulation - réduire la complexité de chaque composant en limitant son XAML et son code uniquement à ce dont il a besoin, rendant votre code plus compréhensible et maintenable.
- Réutilisation - maintenir une présentation et un comportement cohérents des parties répétées de votre application.
Avalonia UI facilite l'utilisation de la composition UI pour créer les mises en page et les fonctions dont vos applications ont besoin.
Lorsque vous construisez une application en utilisant Avalonia UI, il existe plusieurs types de composants parmi lesquels choisir :
- Fenêtres
- Contrôles intégrés
- Contrôles utilisateur
- Contrôles personnalisés
- Contrôles de modèle
Fenêtres et Contrôles intégrés
Une fenêtre dans Avalonia UI est une unité de mise en page de base (pour une plateforme de fenêtres).
Avalonia UI contient un grand nombre de contrôles intégrés qui couvriront la plupart de vos besoins en matière d'UI.
Lorsque vous rencontrez Avalonia UI pour la première fois, vous pourriez placer un seul contrôle intégré dans la zone de contenu d'une fenêtre (ci-dessus, à gauche). C'est la forme la plus simple de composition UI : la fenêtre a le titre de l'application et généralement quelques contrôles d'état de fenêtre (selon la plateforme cible). Le contrôle intégré permet à votre application de recevoir des entrées utilisateur ou de présenter des sorties avec mise en page et stylisation.
Une application légèrement plus complexe peut nécessiter l'un des contrôles de mise en page intégrés pour organiser plus d'un autre contrôle intégré dans la zone de contenu d'une fenêtre (ci-dessus, à droite).
Pour voir l'ensemble des contrôles intégrés d'Avalonia UI, consultez la section de référence ici.
Arbres Logiques et Visuels
Quelle que soit l'arrangement des contrôles que vous utilisez, Avalonia UI représente leurs relations sous forme de structure d'arbre, avec le contrôle 'le plus externe' comme racine. Par exemple, la composition UI précédente peut être représentée comme l'arbre montré ici :
C'est l'arbre de contrôle logique, et il représente les contrôles de l'application (y compris la fenêtre principale) dans la hiérarchie dans laquelle ils sont définis dans le XAML. Il existe de nombreux systèmes dans Avalonia UI qui traitent l'arbre de contrôle logique et son compagnon, l'arbre de contrôle visuel.
Pour plus d'informations sur le concept des arbres de contrôle, consultez ici.
Contrôles Utilisateurs
Les contrôles utilisateurs sont la pierre angulaire de la composition UI dans Avalonia UI.
Vous pouvez ajouter un contrôle utilisateur à la zone de contenu d'une fenêtre principale, pour représenter une 'vue de page' (ci-dessus, à gauche). Cela vous permet de mettre en œuvre une application plus complexe avec plusieurs pages ; où la mise en page et la fonction de chaque page se trouvent dans leurs propres fichiers de contrôle utilisateur (XAML et code).
Pour plus d'informations sur la façon de mettre en œuvre une application multi-pages utilisant des vues, consultez le guide ici.
Une autre utilisation d'un contrôle utilisateur est en tant que contrôle de composant (ci-dessus, à droite). Vous pourriez initialement faire cela pour réduire la complexité d'une fenêtre ou d'une vue de page ; mais ensuite, vous pourriez également (peut-être plus tard) réutiliser le composant résultant sur une autre page.
Tutoriel
Pour des tutoriels sur les DataTemplates, consultez Avalonia.Samples.
Contrôles de Collection
Une autre variation de la composition UI est lorsque vous devez présenter une collection d'éléments.
Ce scénario utilisera l'un des contrôles répétitifs intégrés, lié à une collection ; avec un modèle de données pour représenter les éléments de la collection.
Pour des informations sur la façon de FAIRE
Contrôles Personnalisés
Dans le scénario peu probable où vous ne pouvez pas trouver un contrôle intégré Avalonia UI pour couvrir les exigences UI de votre application, vous pouvez créer votre propre contrôle personnalisé à partir de zéro. Cela vous permet de définir vos propres propriétés, événements et méthodes personnalisés ; mais cela nécessitera également que vous implémentiez le dessin de la présentation du contrôle à partir de zéro.
Pour apprendre à implémenter un contrôle personnalisé, consultez le guide ici.
Contrôles Modélisés
Un contrôle modélisé utilise le système de stylisation Avalonia UI pour substituer une balise dans la mise en page de l'interface utilisateur par un
Pour plus d'informations sur les concepts derrière le système de stylisation Avalonia UI, voir ici.