Le widget Onglets vous permet d'organiser le contenu de l'application composite en plusieurs vues. Chaque vue est un onglet avec une étiquette que vous pouvez définir à l'aide des propriétés du widget. Au moment de l'exécution, un seul onglet est ouvert à la fois et l'onglet actif est souligné. Le widget Onglets est un widget dynamique qui grandit ou rétrécit en fonction de la taille de son conteneur. Vous pouvez attribuer au widget une largeur ou une hauteur fixes en contrôlant les dimensions du conteneur ou en utilisant les propriétés Width et Height du widget.

Vous pouvez configurer le widget de la manière suivante :

Par défaut, tous les onglets du widget sont chargés lors de l'ouverture de l'application composite. Les services liés à un widget dans l'onglet sont exécutés lorsque des événements, tels que l'événement Loaded de l'application composite, sont déclenchés pendant l'exécution. L'exécution de services et le chargement de widgets dans des onglets en arrière-plan peuvent réduire les performances lorsque le widget Onglets contient plusieurs visualisations complexes qui incluent une grande collection de widgets. Vous pouvez configurer le chargement différé pour retarder le chargement des onglets non visibles jusqu'à ce qu'ils soient nécessaires à l'exécution, ce qui améliore les performances de l'application composite et du réseau. Lorsque vous configurez le chargement différé sur le widget, veillez à exclure l'onglet par défaut du chargement différé, car il s'affiche instantanément lorsque l'application composite s'ouvre. Pour activer le chargement différé d'un onglet dans le widget, procédez comme suit :

Au moment de l'exécution, les onglets chargés en différé sont automatiquement chargés lorsque vous ouvrez l'onglet. Lorsque la propriété EnableContainerUnload est activée pour un conteneur d'onglet, le conteneur est automatiquement déchargé pour libérer les ressources système et améliorer les performances (cela le rend invisible). Lorsque vous revenez à un onglet déchargé, l'onglet est automatiquement rechargé. Vous pouvez créer des liaisons supplémentaires vers les services de chargement différé d'un onglet pour charger et décharger manuellement le contenu à l'aide d'autres événements dans l'application composite, tels que l'événement Clicked d'un widget Bouton.

Vous pouvez configurer le style des onglets à l'aide de la propriété TabStyle du widget. Cette propriété prend en charge deux options :

Sans cadre : les noms des onglets s'affichent sans bordure. (Par défaut)

Encadré : une bordure s'affiche autour du nom de l'onglet et de la zone de contenu. Utilisez la propriété HideContentAreaBorder pour contrôler la visibilité de la bordure autour de la zone de contenu.

Lorsque vous utilisez des onglets encadrés, vous pouvez personnaliser l'apparence des noms d'onglet à l'aide de la propriété TabMode. Les noms d'onglet peuvent afficher une étiquette, une icône ou les deux, selon le contenu et l'expérience utilisateur que vous souhaitez créer. Pour chaque onglet, vous pouvez définir une étiquette de texte, référencer une entité de média ou spécifier une icône SVG.

La capture d'écran suivante montre deux onglets affichant à la fois une étiquette et une icône. L'utilisation à la fois d'étiquettes et d'icônes assure une plus grande clarté pour les nouveaux utilisateurs.

La capture d'écran suivante montre des onglets affichant uniquement des icônes. Les icônes aident les utilisateurs à identifier rapidement la fonction de chaque onglet, et sont particulièrement utiles lorsque l'espace à l'écran est limité.

Pour personnaliser la taille des icônes, utilisez la propriété TabIconSize du widget.

Lorsque vous utilisez des onglets encadrés, vous pouvez configurer le widget pour qu'il affiche les onglets horizontalement ou verticalement à l'aide de la propriété TabsPosition. Les onglets peuvent s'afficher horizontalement, en haut ou en bas, ou verticalement, à gauche ou à droite de la zone du contenu. Pour utiliser des onglets verticaux, procédez comme suit :

L'exemple suivant montre des onglets encadrés alignés verticalement sur la gauche.

Par défaut, les onglets sont configurés pour s'agrandir ou se rétrécir de sorte à s'adapter au contenu du nom de l'onglet, en fonction de l'espace disponible. Utilisez la propriété TabWdithConfig pour répartir l'espace disponible de manière uniforme entre tous les onglets ou pour définir une largeur fixe. La répartition uniforme de l'espace n'est possible que lorsque les onglets sont affichés horizontalement.