Notifications et progression pour Visual Studio

Systèmes de notification

Il existe plusieurs façons d’informer l’utilisateur de ce qui se passe dans Visual Studio en ce qui concerne ses tâches de développement logiciel.

Lors de l’implémentation d’un type de notification :

  • Conservez le nombre de notifications au nombre minimal effectif. Les messages de notification doivent s’appliquer à la majorité des utilisateurs de Visual Studio ou aux utilisateurs d’une zone de fonctionnalité/fonctionnalité spécifique. L’utilisation excessive des notifications peut faire reculer l’utilisateur ou diminuer la facilité d’utilisation perçue du système.

  • Vérifiez que vous présentez des messages clairs et actionnables que l’utilisateur peut utiliser pour appeler le contexte approprié pour effectuer des choix plus complexes et prendre des mesures supplémentaires.

  • Présenter correctement des messages synchrones et asynchrones. Les notifications synchrones indiquent que quelque chose a besoin d’une attention immédiate, par exemple lorsqu’un service web plante ou qu’une exception de code est levée. L’utilisateur doit être informé de ces situations immédiatement d’une manière qui nécessite son entrée, par exemple dans une boîte de dialogue modale. Les notifications asynchrones sont celles que l’utilisateur doit connaître, mais qui ne doivent pas agir immédiatement, par exemple lorsqu’une opération de génération se termine ou qu’un déploiement de site web se termine. Ces messages doivent être plus ambiants et ne pas interrompre le flux de tâche de l’utilisateur.

  • Utilisez les boîtes de dialogue modales uniquement si nécessaire pour empêcher l’utilisateur d’entreprendre d’autres actions avant d’accuser réception du message ou de prendre une décision présentée dans la boîte de dialogue.

  • Supprimez les notifications ambiantes lorsqu’elles ne sont plus valides. N’exigez pas que l’utilisateur ignore une notification s’il a déjà pris des mesures pour résoudre le problème auquel il a été averti.

  • N’oubliez pas que les notifications peuvent entraîner des corrélations fausses. Les utilisateurs peuvent croire qu’une ou plusieurs de leurs actions ont déclenché une notification lorsqu’il n’y avait en fait aucune relation causale. Soyez clair dans le message de notification concernant le contexte, le déclencheur et la source de la notification.

Choix de la méthode appropriée

Utilisez ce tableau pour vous aider à choisir la méthode appropriée pour informer l’utilisateur de votre message.

Méthode Utiliser À ne pas utiliser
Boîtes de dialogue de message d’erreur modale Utilisez quand une réponse utilisateur est requise avant de continuer. N’utilisez pas lorsqu’il n’est pas nécessaire de bloquer l’utilisateur et d’interrompre son flux. Évitez d’utiliser des dialogues modals s’il est possible d’afficher le message de manière moins intrusive.
Barre d’état de l’IDE Utilisez lorsqu’il existe des informations textuelles ambiantes concernant l’état d’un processus. Ne pas utiliser seul. Mieux utilisé conjointement avec un autre mécanisme de commentaires.
Barre d’informations incorporée Dans une fenêtre outil ou une fenêtre de document, utilisez pour notifier la progression, l’état d’erreur, les résultats et/ou les informations actionnables. N’utilisez pas si les informations ne sont pas pertinentes pour l’emplacement où la barre d’informations est placée.

N’utilisez pas en dehors d’une fenêtre document/outil.
Modifications apportées au curseur de la souris Peut être utilisé pour informer qu’un processus se passe. Également utilisé pour avertir qu’il existe une modification d’état dans la souris, par exemple lorsque le glisser-déplacer est en cours ou que le curseur de la souris est en mode spécifique, tel que le mode dessin. N’utilisez pas pour les modifications de progression courtes ou si le déplacement du curseur est probable (par exemple, lorsqu’il est lié à des parties d’un processus plus long au lieu de l’ensemble du processus).
Indicateurs de progression Utilisez cette fonction lorsque vous devez signaler la progression (déterminer ou indéterminer). Il existe différents types d’indicateurs de progression et une utilisation spécifique pour chacun d’eux. Consultez les indicateurs de progression.
Fenêtre Notifications Visual Studio La fenêtre Notifications n’est pas extensible publiquement. Toutefois, il est utilisé pour communiquer une plage de messages sur Visual Studio, y compris les problèmes critiques liés à votre licence et aux notifications d’informations des mises à jour de Visual Studio ou aux packages. N’utilisez pas d’autres types de notifications.
Liste d’erreurs Lorsque le problème se rapporte directement à la solution actuellement ouverte de l’utilisateur ayant un problème (erreur/avertissement/informations), il peut être nécessaire de prendre des mesures sur le code.

Cela inclut, par exemple :

- Messages du compilateur (erreur/avertissement/informations)

- Analyseur de code/Messages de diagnostic sur le code

- Générer des messages

Peut être approprié pour les problèmes liés aux fichiers projet ou solution, mais considérez d’abord une indication Explorateur de solutions.
N’utilisez pas les éléments qui n’ont aucune relation avec le code de solution ouvert de l’utilisateur.
Notifications de l’éditeur : ampoule Utilisez quand vous avez un correctif disponible pour résoudre un problème qui existe dans le fichier ouvert.

Notez que l’ampoule doit également être utilisée pour héberger des actions rapides effectuées sur le code de l’utilisateur à la demande, telles que les refactorisations, mais dans ce cas ne s’affiche pas « style de notification ».
N’utilisez pas les éléments qui n’ont aucune relation avec le fichier ouvert.
Notifications de l’éditeur : Squiggles Permet d’avertir l’utilisateur d’un problème avec une étendue particulière de son code ouvert (par exemple, une bascule rouge pour les erreurs). N’utilisez pas les éléments qui ne sont pas liés à une étendue particulière de leur code ouvert.
Barres d’état incorporées Permet de fournir l’état lié au contenu ou au processus dans le contexte d’une fenêtre d’outil spécifique, d’une fenêtre de document ou d’une fenêtre de boîte de dialogue. N’utilisez pas pour les notifications, processus ou éléments de produit généraux qui n’ont aucune relation avec le contenu dans la fenêtre spécifique.
Notifications de la barre d’état Windows Permet de présenter des notifications pour les processus hors processus ou les applications complémentaires. N’utilisez pas les notifications pertinentes pour l’IDE.
Bulles de notification Permet de notifier un processus distant ou de modifier en dehors de l’IDE. N’utilisez pas comme moyen d’informer l’utilisateur des processus au sein de l’IDE.

Méthodes de notification

Boîtes de dialogue de message d’erreur modale

Une boîte de dialogue de message d’erreur modale permet d’afficher un message d’erreur qui nécessite la confirmation ou l’action de l’utilisateur.

Modal error message

Boîte de dialogue de message d’erreur modale alertant l’utilisateur d’une chaîne de connexion non valide sur une base de données

Barre d’état de l’IDE

La probabilité que les utilisateurs remarquent le texte de la barre d’état est corrélé à leur expérience informatique tout autour et à une expérience spécifique avec la plateforme Windows. La base de clients Visual Studio a tendance à être expérimentée dans les deux domaines, bien que même les utilisateurs Windows connaissables peuvent manquer des modifications dans la barre d’état. Par conséquent, la barre d’état est la meilleure utilisée à des fins d’information ou comme indicateur redondant pour les informations présentées ailleurs. Tout type d’informations critiques que l’utilisateur doit résoudre immédiatement doit être fourni dans une boîte de dialogue ou dans la fenêtre de l’outil Notifications.

La barre d’état de Visual Studio est conçue pour permettre l’affichage de plusieurs types d’informations. Il est divisé en régions pour les commentaires, le concepteur, la barre de progression, l’animation et le client.

La région de commentaires et la région du concepteur sont toujours visibles. La barre de progression et les régions d’animation sont toujours dynamiques et basées sur le contexte utilisateur. La zone du concepteur a une largeur statique déterminée par la longueur de la chaîne extraite d’une ressource associée pour le message texte. Cela permet à la localisation de redimensionner la largeur sans nécessiter de modification de code. Pour l’anglais, la largeur de cette chaîne est d’environ 220 pixels. La région du concepteur se comporte normalement et la région de commentaires absorbe l’espace restant.

La barre d’état est également colorisée pour ajouter un intérêt visuel et une valeur fonctionnelle en communiquant différents changements d’état IDE, comme lorsque l’IDE est en mode débogage.

IDE status bar color changes

Couleurs de la barre d’état IDE

Barre d’informations incorporée

Une barre d’informations peut être utilisée en haut d’une fenêtre de document ou d’une fenêtre outil pour informer l’utilisateur d’un état ou d’une condition. Il peut également offrir des commandes afin que l’utilisateur puisse avoir un moyen de prendre facilement des mesures. La barre d’informations est un contrôle shell standard. Évitez de créer vos propres, qui agissent et apparaissent incohérents avec d’autres dans l’IDE. Consultez les barres d’informations pour obtenir des détails sur l’implémentation et des conseils d’utilisation.

Embedded infobar

Barre d’informations incorporée dans une fenêtre de document, en alertant l’utilisateur que l’IDE est en mode de débogage historique et que l’éditeur ne répond pas de la même façon que dans le mode de débogage standard.

Modifications apportées au curseur de la souris

Lorsque vous modifiez le curseur de la souris, utilisez des couleurs liées au service VSColor et qui sont déjà associées au curseur. Les modifications de curseur peuvent être utilisées pour indiquer une opération en cours, ainsi que les zones d’accès où l’utilisateur pointe sur une cible qui peut être déplacée, déplacée ou utilisée pour sélectionner un objet.

Utilisez le curseur de la souris occupé/d’attente uniquement lorsque toutes les heures processeur disponibles doivent être réservées pour une opération, ce qui empêche l’utilisateur d’exprimer une autre entrée. Dans la plupart des cas avec des applications bien écrites utilisant le multithreading, les temps où les utilisateurs ne peuvent pas effectuer d’autres opérations doivent être rares.

N’oubliez pas que les modifications de curseur sont utiles en tant que repère redondant pour les informations présentées ailleurs. Ne vous fiez pas à un changement de curseur comme seul moyen de communiquer avec l’utilisateur, en particulier lorsque vous essayez de transmettre quelque chose qui est essentiel à l’adresse de l’utilisateur.

Indicateurs de progression

Les indicateurs de progression sont importants pour donner aux utilisateurs des commentaires pendant les processus qui prennent plus de quelques secondes. Les indicateurs de progression peuvent être affichés sur place (près du point de lancement de l’action en cours), dans une barre d’état incorporée, dans une boîte de dialogue modale ou dans la barre d’état De Visual Studio. Suivez les instructions des indicateurs de progression concernant leur utilisation et leur implémentation.

Fenêtre Notifications Visual Studio

La fenêtre Notifications Visual Studio informe les développeurs des licences, de l’environnement (Visual Studio), des extensions et des mises à jour. Les utilisateurs peuvent ignorer des notifications individuelles ou choisir d’ignorer certains types de notifications. La liste des notifications ignorées est gérée dans une page Options d’outils>.

La fenêtre Notifications n’est pas extensible.

Visual Studio Notifications window

Fenêtre de l’outil Notifications Visual Studio

Liste d′erreurs

Une notification dans la liste d’erreurs indique les erreurs et les avertissements qui se sont produits pendant la compilation et ou le processus de génération, et permet à l’utilisateur de naviguer dans le code vers cette erreur de code spécifique.

Error list

Liste d’erreurs dans Visual Studio

Barres d’état incorporées

Étant donné que la barre d’état de l’IDE est dynamique, avec son contexte de région client défini sur la fenêtre de document active et les informations mises à jour sur le contexte et/ou les réponses système de l’utilisateur, il est difficile de maintenir un affichage continu des informations ou de donner l’état sur les processus asynchrones à long terme. Par exemple, la barre d’état de l’IDE n’est pas appropriée pour les notifications des résultats de l’exécution de test pour plusieurs exécutions et/ou sélections d’éléments actionnables immédiatement. Il est important de conserver ces informations d’état dans le contexte de la fenêtre document ou outil où l’utilisateur effectue une sélection ou démarre un processus.

Embedded status bar

Barre d’état incorporée dans Visual Studio

Notifications de la barre d’état Windows

La zone de notification Windows est en regard de l’horloge système dans la barre des tâches Windows. De nombreux utilitaires et composants logiciels fournissent des icônes dans cette zone afin que l’utilisateur puisse obtenir un menu contextuel pour les tâches à l’échelle du système, telles que la modification de la résolution d’écran ou l’obtention de mises à jour logicielles.

Les notifications au niveau de l’environnement doivent être exposées dans le hub notifications Visual Studio, et non dans la zone de notification Windows.

Bulles de notification

Les bulles de notification peuvent apparaître sous forme d’informations dans un éditeur/concepteur ou dans le cadre de la zone de notification Windows. L’utilisateur considère ces bulles comme des problèmes qu’il peut résoudre ultérieurement, ce qui est un avantage pour les notifications non critiques. Les bulles sont inappropriées pour les informations critiques que l’utilisateur doit résoudre immédiatement. Si vous utilisez des bulles de notification dans Visual Studio, suivez les instructions de Bureau Windows pour les bulles de notification.

Notification bubble

Bulle de notification dans la zone de notification Windows utilisée pour Visual Studio

Indicateurs de progression

Les indicateurs de progression constituent une partie importante d’un système de notification pour donner des commentaires à l’utilisateur. Ils indiquent à l’utilisateur quand les processus et les opérations sont terminés. Les types d’indicateurs familiers incluent les barres de progression, les curseurs tournants et les icônes animées. Le type et le positionnement d’un indicateur de progression dépendent du contexte, y compris ce qui est signalé et du temps nécessaire à l’exécution du processus ou de l’opération.

Facteurs

Pour déterminer le type d’indicateur approprié, vous devez déterminer les facteurs suivants.

  1. Minutage : durée de l’opération

  2. Modalité : indique si l’opération est modale pour l’environnement (verrouille l’interface utilisateur jusqu’à ce que le processus soit terminé)

  3. Persistant/temporaire : si le résultat final de la progression doit être signalé et/ou visible ultérieurement

  4. Détermination/indétermination : indique si l’heure de fin de l’opération et la progression peuvent être calculées

  5. Emplacement graphique/textuel : que la progression ou le processus soit capturé inline, dans le corps d’un message ou d’un contrôle spécifique, tel que le contrôle Tree

  6. Proximité : indique si la progression doit être proche de l’interface utilisateur à laquelle elle est liée. (Par exemple, peut-il se trouver dans la barre d’état, qui peut être éloigné, ou doit-il être près du bouton qui a lancé le processus ?)

Détermination de la progression

Type de progression Quand et comment utiliser Notes
Barre de progression (détermina) Durée attendue de >5 secondes.

Peut inclure une description textuelle des détails du processus.
N’incorporez pas de texte dans l’animation.
Barre d'informations Messagerie associée à l’interface utilisateur contextuelle. Consultez les barres d’informations.

Peut inclure une description textuelle des détails du processus.
N’utilisez pas plusieurs barres d’informations lorsque vous devez indiquer plusieurs processus. Utilisez plutôt des barres de progression empilées.
Fenêtre Sortie Notification temporaire : processus au niveau de l’application que l’utilisateur souhaite examiner les détails d’une fois l’opération terminée. N’utilisez pas si l’utilisateur doit faire référence aux données ultérieurement.
Fichier journal Associé à une notification intransiente dans les cas où il est important d’enregistrer les détails après l’achèvement.
Barre d'état Notification temporaire : processus au niveau de l’application dont l’utilisateur n’aura pas besoin de détails après l’achèvement.

Inclut une barre de progression incorporée.

Peut inclure une description textuelle des détails du processus.

Progression indéterminé

Type de progression Quand et comment utiliser Notes
Barre de progression (indéterminé) Durée attendue de >5 secondes.

Peut inclure une description textuelle des détails du processus.
N’incorporez pas de texte dans l’animation.
Fourmis (points horizontaux animés) Aller-retour au serveur.

Placé à proximité du point de contexte en haut du conteneur parent.
N’utilisez pas s’il n’est pas parenté par l’ensemble du conteneur.
Spinner (anneau de progression) Processus associé à l’interface utilisateur contextuelle ou où l’espace est un facteur à prendre en compte.

Peut inclure une description textuelle des détails du processus.
Barre d'informations Messagerie associée à l’interface utilisateur contextuelle. Consultez les barres d’informations. N’utilisez pas plusieurs barres d’informations lorsque vous devez indiquer plusieurs processus. Utilisez plutôt des barres de progression empilées.
Fenêtre Sortie Notification temporaire : processus au niveau de l’application que l’utilisateur souhaite passer en revue les détails d’une fois l’opération terminée. Ne pas utiliser pour les informations qui doivent être conservées entre les sessions.
Fichier journal Associé à une notification intransiente dans les cas où il est important d’enregistrer les détails après l’achèvement.
Barre d'état Notification temporaire : processus au niveau de l’application dont l’utilisateur n’aura pas besoin de détails après l’achèvement.

Inclut la barre de progression incorporée.

Peut inclure une description textuelle des détails du processus.

Types d’indicateurs de progression

Barres de progression

Indéterminé

Indeterminate progress bar

Barre de progression indéterminé

« Indéterminé » signifie que la progression globale d’une opération ou d’un processus ne peut pas être déterminée. Utilisez des barres de progression indéterminées pour les opérations qui nécessitent une durée illimitée ou qui accèdent à un nombre inconnu d’objets. Utilisez une description textuelle pour accompagner ce qui se passe. Utilisez des délais d’expiration pour donner des limites aux opérations basées sur le temps. Les barres de progression indéterminées utilisent des animations pour montrer que la progression est en cours, mais ne fournissent aucune autre information. Ne choisissez pas une barre de progression indéterminé basée uniquement sur le manque de précision possible seul.

Déterminée

Determinate progress bar

Barre de progression détermina

« Déterminer » signifie qu’une opération ou un processus nécessite une durée limitée, même si cette durée ne peut pas être prédite avec précision. Indiquez clairement l’achèvement. Ne laissez pas une barre de progression atteindre 100 % sauf si l’opération est terminée. L’animation de barre de progression détermine le déplacement de gauche à droite de 0 à 100 %.

Ne déplacez jamais l’indicateur de progression vers l’arrière pendant une opération. La barre doit avancer régulièrement lorsque l’opération commence et atteindre 100 % à sa fin. Le point de la barre de progression consiste à donner à l’utilisateur une idée du temps nécessaire à l’ensemble de l’opération, quel que soit le nombre d’étapes impliquées.

Rapports simultanés (barres de progression empilées)

Si une opération prend beaucoup de temps , peut-être plusieurs minutes, deux barres de progression peuvent être utilisées, une qui indique la progression globale d’une opération et une autre pour la progression de l’étape actuelle. Par exemple, si un programme d’installation copie de nombreux fichiers, une barre de progression peut être utilisée pour indiquer la durée pendant laquelle l’ensemble du processus prend pendant une seconde peut indiquer le pourcentage du fichier ou du répertoire actif en cours de copie. Ne signalez pas plus de cinq opérations ou processus simultanés à l’aide de barres de progression empilées. Si vous avez plus de cinq opérations ou processus simultanés à signaler, utilisez une boîte de dialogue modale avec un bouton Annuler et signalez les détails de progression dans la fenêtre Sortie.

Descriptions textuelles

Utilisez une description textuelle pour accompagner ce qui se passe et l’heure estimée à la fin. S’il est impossible de déterminer la durée d’une opération, un meilleur choix pour donner des commentaires peut être une icône animée plutôt qu’une barre de progression.

Visual Studio fournit une barre de progression standard dans la barre d’état qui peut être utilisée par n’importe quel produit intégré à Visual Studio. Pour obtenir des descriptions textuelles de ce qui se passe pendant que la barre de progression est animée, le texte de la barre d’état peut être mis à jour.

Autres indicateurs de progression

Fourmis (points horizontaux animés)

Progress ants

« Fourmis », points horizontaux animés, fournissent une référence visuelle pour un processus de serveur aller-retour indéterminé.

Spinner (anneau de progression)

Progress spinner

Le spinner (également appelé « anneau de progression ») est un indicateur de progression indéterminé principalement utilisé par rapport à l’interface utilisateur contextuelle. Affichez un spinner à proximité de son contenu associé, tel qu’un en-tête de catégorie textuelle, une messagerie ou un contrôle.

Commentaires sur le curseur

Pour les opérations qui prennent entre 2 et 7 secondes, fournissez des commentaires sur le curseur. En règle générale, cela signifie l’utilisation du curseur d’attente fourni par le système d’exploitation. Pour obtenir des conseils, consultez l’article MSDN Cursors.Wait, propriété.

Emplacements des indicateurs de progression

Barre d'état

La barre d’état donne à votre application un endroit où afficher des messages et des informations utiles à l’utilisateur sans interrompre le travail de l’utilisateur. Généralement affiché en bas d’une fenêtre, l’état de progression est un volet d’info-bulles qui inclut un message sur la mesure de la progression en combinaison avec un indicateur de barre de progression.

Status bar with progress bar

Barre d’état avec barre de progression

Status bar with messaging

Barre d’état avec description textuelle

Barre d'informations

À l’instar de la barre d’état, la barre d’informations fournit une notification contextuelle et une messagerie, qui peuvent également être jumelées avec des indicateurs de progression indéterminés tels que la barre de progression ou le spinner. La barre d’informations ne doit pas fournir de progression de niveau granulaire ni déterminer l’indication de progression. Consultez les barres d’informations.

Infobar with progress bar and messaging

Barre d’informations avec barre de progression et description textuelle

Infobar inside a window

Intraligne

L’indication de progression inline peut être représentée par n’importe quel type de chargeur de progression. En règle générale, l’indicateur de progression est associé à la messagerie, mais ce n’est pas une exigence.

Inline progress spinner

Spinner combiné à une description textuelle

Inline stacked progress bars

Barres de progression empilées déterminables

Inline progress messaging

Texte inline de l’Explorateur de serveurs : Actualisation...

Fenêtres d’outil

L’indication de progression globale est représentée par une barre de progression indéterminée positionnée directement sous la barre d’outils.

Global indeterminate progress bar

Barre de progression globale indéterminé de Team Explorer

Boîtes de dialogue

Les boîtes de dialogue peuvent contenir n’importe quel type de chargeur de progression. Les indicateurs de progression peuvent être associés à la messagerie, ainsi qu’à plusieurs niveaux d’indication de progression pour représenter des processus granulaires et secondaires.

Dialog with multiple progress indicator types

Boîte de dialogue Visual Studio avec des processus simultanés et plusieurs types d’indicateurs de progression

Dialog with progress loader and messaging

Boîte de dialogue Visual Studio avec chargement de progression et commandes inline de messagerie

Bien documenter

Le document peut afficher plusieurs types de chargeurs de progression en combinaison avec des contrôles.

Progress messaging in document well

Barre de progression indéterminé sous la barre d’outils

Fenêtre Sortie

La fenêtre Sortie est appropriée pour gérer la progression du processus et l’état de progression en cours via la messagerie textuelle inline. Vous devez utiliser la barre d’état ainsi que les rapports de progression de la fenêtre Sortie.

Progress messaging in Output Window

Fenêtre de sortie avec l’état du processus en cours et la messagerie d’attente

Barres d’informations

Les barres d’informations donnent à l’utilisateur un indicateur proche de son point d’attention et l’utilisation du contrôle de barre d’informations partagée garantit la cohérence dans l’apparence visuelle et l’interaction.

Infobar

Barres d’informations dans Visual Studio

Utilisations appropriées pour une barre d’informations

  • Pour donner à l’utilisateur un message non bloquant mais important pertinent pour le contexte actuel

  • Pour indiquer que l’interface utilisateur est dans un état ou une condition spécifique qui comporte des implications d’interaction, telles que le débogage historique

  • Pour informer l’utilisateur que le système a détecté des problèmes, par exemple lorsqu’une extension provoque des problèmes de performances

  • Pour fournir à l’utilisateur un moyen d’agir facilement, par exemple lorsque l’éditeur détecte qu’un fichier comporte des onglets et des espaces mixtes

À faire :
  • Laissez le texte du message de barre d’informations court et jusqu’au point.

  • Conservez le texte sur les liens et les boutons succincts.

  • Vérifiez que les options « action » que vous fournissez aux utilisateurs sont minimales, affichant uniquement les actions requises.

À ne pas faire :
  • Utilisez une barre d’informations pour offrir des commandes standard qui doivent être placées dans une barre d’outils.

  • Utilisez une barre d’informations à la place d’une boîte de dialogue modale.

  • Créez un message flottant en dehors d’une fenêtre.

  • Utilisez plusieurs barres d’informations dans plusieurs emplacements dans la même fenêtre.

Plusieurs barres d’informations peuvent-elles s’afficher en même temps ?

Oui, plusieurs barres d’informations peuvent s’afficher en même temps. Ils seront affichés dans la commande de première venue, première servie avec la première barre d’informations affichée en haut et des barres d’informations supplémentaires affichées ci-dessous.

L’utilisateur voit au maximum trois barres d’informations à la fois, après quoi, si d’autres barres d’informations sont disponibles, la région de la barre d’informations devient modifiable.

Création d’une barre d’informations

La barre d’informations comporte quatre sections, de gauche à droite :

  • Icône : c’est là que vous ajouteriez une icône que vous souhaitez afficher pour la barre d’informations, telle qu’une icône d’avertissement.

  • Texte : vous pouvez ajouter du texte pour décrire l’utilisateur de scénario/situation, ainsi que des liens dans le texte, si nécessaire. N’oubliez pas de garder le texte succinct.

  • Actions : cette section doit contenir des liens et des boutons pour les actions que l’utilisateur peut effectuer dans votre barre d’informations.

  • Bouton Fermer : la dernière section à droite peut avoir un bouton fermer.

Création d’une barre d’informations standard dans le code managé

La classe InfoBarModel peut être utilisée pour créer une source de données pour une barre d’informations. Utilisez l’un des quatre constructeurs suivants :

public InfoBarModel(IEnumerable<IVsInfoBarTextSpan> textSpans, ImageMoniker image = default(ImageMoniker), bool isCloseButtonVisible = true);

public InfoBarModel(string text, ImageMoniker image = default(ImageMoniker), bool isCloseButtonVisible = true);

public InfoBarModel(IEnumerable<IVsInfoBarTextSpan> textSpans, IEnumerable<IVsInfoBarActionItem> actionItems, ImageMoniker image = default(ImageMoniker), bool isCloseButtonVisible = true);

public InfoBarModel(string text, IEnumerable<IVsInfoBarActionItem> actionItems, ImageMoniker image = default(ImageMoniker), bool isCloseButtonVisible = true);

Voici un exemple qui crée un InfoBarModel avec du texte avec un lien hypertexte, un bouton d’action et une icône.

Infobar with hyperlink

var infoBar = new InfoBarModel(
    textSpans: new[]
    {
        new InfoBarTextSpan("This is a "),
        new InfoBarHyperlink("hyperlink"),
        new InfoBarTextSpan(" InfoBar.")
    },
    actionItems: new[]
    {
        new InfoBarButton("Click Me")
    },
    image: KnownMonikers.StatusInformation,
    isCloseButtonVisible: true);

Création d’une barre d’informations standard dans le code natif

Implémentez l’interface IVsInfoBar pour fournir une barre d’informations à partir du code natif.

public interface IVsInfoBar
{
    IVsInfoBarActionItemCollection ActionItems { get; }
    ImageMoniker Image { get; }
    bool IsCloseButtonVisible { get; }
    IVsInfoBarTextSpanCollection TextSpans { get; }
}

Obtention d’une barre d’informations UIElement à partir d’une barre d’informations

L’implémentation d’InfoBarModel ou IVsInfoBar est des modèles de données qui doivent être transformés en uiElement pour être affichés dans l’interface utilisateur. Un UIElement peut être récupéré avec le service SVsInfoBarUIFactory/IVsInfoBarUIFactory.

private bool TryCreateInfoBarUI(IVsInfoBar infoBar, out IVsInfoBarUIElement uiElement)
{
    IVsInfoBarUIFactory infoBarUIFactory = serviceProvider.GetService(typeof(SVsInfoBarUIFactory)) as IVsInfoBarUIFactory;
    if (infoBarUIFactory == null)
    {
        uiElement = null;
        return false;
    }

    uiElement = infoBarUIFactory.CreateInfoBar(infoBar);
    return uiElement != null;
}

Placement

Les barres d’informations peuvent être affichées dans un ou plusieurs des emplacements suivants :

  • Fenêtres d’outil

  • Dans un onglet de document

Important

Il est possible de positionner une barre d’informations pour donner un message sur le contexte global. Cela s’affiche entre les barres d’outils et le document. Cela n’est pas recommandé, car il provoque des problèmes liés à « sauter et à se détacher » de l’IDE et doit être évité, sauf si absolument nécessaire et approprié.

Placement d’une barre d’informations dans un ToolWindowPane

La méthode ToolWindowPane.AddInfoBar(IVsInfoBar) peut être utilisée pour ajouter une barre d’informations à une fenêtre d’outil. Cette API peut ajouter un IVsInfoBar (dont InfoBarModel est une implémentation par défaut) ou un IVsUIElement.

Placement d’une barre d’informations dans un document ou non-ToolWindowPane

Pour placer une barre d’informations dans n’importe quel IVsWindowFrame, utilisez la propriété VSFPROPID_InfoBarHost pour obtenir iVsInfoBarHost pour le frame, puis ajoutez l’interface utilisateur de la barre d’informations.

private void AddInfoBar(IVsWindowFrame frame, IVsUIElement uiElement)
{
    IVsInfoBarHost infoBarHost;
    if (TryGetInfoBarHost(frame, out infoBarHost))
    {
        infoBarHost.AddInfoBar(uiElement);
    }
}
private bool TryGetInfoBarHost(IVsWindowFrame frame, out IVsInfoBarHost infoBarHost)
{
    object infoBarHostObj;
    if (ErrorHandler.Failed(frame.GetProperty((int)__VSFPROPID7.VSFPROPID_InfoBarHost, out infoBarHostObj)))
    {
        infoBarHost = null;
        return false;
    }

    infoBarHost = infoBarHostObj as IVsInfoBarHost;
    return infoBarHost != null;
}

Placer une barre d’informations dans la fenêtre principale

Pour placer une barre d’informations dans la fenêtre principale, utilisez la VSSPROPID_MainWindowInfoBarHost du service IVsShell pour obtenir l’IVsInfoBarHost de la fenêtre principale, puis ajoutez-y la barre d’informations UIElement.

Puis-je savoir quand l’utilisateur prend des mesures dans ma barre d’informations ?

Oui, nous retournerons chaque action d’événement à l’auteur de la barre d’informations. Il appartient ensuite à l’auteur de la barre d’informations de prendre des mesures dans l’IDE en fonction de la sélection de l’utilisateur dans la barre d’informations. Les barres d’informations sont automatiquement supprimées de l’hôte dont le bouton Fermer a été cliqué, mais un travail supplémentaire est nécessaire si d’autres barres d’informations doivent être supprimées après la fermeture. Les données de télémétrie doivent également être journalisées indépendamment par chaque barre d’informations.

Réception d’événements de barre d’informations dans un ToolWindowPane

ToolWindowPane a deux événements pour les barres d’informations. L’événement InfoBarClosed est déclenché lorsqu’une barre d’informations dans ToolWindowPane est fermée. L’événement InfoBarActionItemClicked est déclenché lorsqu’un lien hypertexte ou un bouton à l’intérieur de la barre d’informations est cliqué.

Réception d’événements de barre d’informations directement à partir de l’uiElement

IVsInfoBarUIElement.Advise peut être utilisé pour s’abonner à des événements directement à partir de l’uiElement d’une barre d’informations. L’implémentation d’IVsInfoBarUIEvents permet à l’auteur de recevoir des événements de fermeture et de clic.

public interface IVsInfoBarUIEvents
{
    void OnActionItemClicked(IVsInfoBarUIElement infoBarUIElement, IVsInfoBarActionItem actionItem);
    void OnClosed(IVsInfoBarUIElement infoBarUIElement);
}

Validation des erreurs

Lorsqu’un utilisateur entre des informations qui ne sont pas acceptables, par exemple lorsqu’un champ obligatoire est ignoré ou lorsque les données sont entrées dans le format incorrect, il est préférable d’utiliser la validation de contrôle ou les commentaires près du contrôle au lieu d’utiliser une boîte de dialogue d’erreur contextuelle bloquante.

Validation de champ

La validation de formulaire et de champ se compose de trois composants : un contrôle, une icône et une info-bulle. Bien que plusieurs types de contrôles puissent l’utiliser, une zone de texte sera utilisée comme exemple.

Field validation (blank)

Si le champ est obligatoire, il doit y avoir du texte en filigrane indiquant <Obligatoire> et l’arrière-plan du champ doit être jaune clair (VSColor : Environment.ControlEditRequiredBackground) et le premier plan doit être gris (VSColor : Environment.ControlEditRequiredHintText) :

Field validation with

Le programme peut déterminer que le contrôle est dans un état de contenu non valide entré lorsque le focus est déplacé vers un autre contrôle ou lorsque l’utilisateur clique sur un bouton de validation [OK] ou lorsque l’utilisateur enregistre le document ou le formulaire.

Lorsque l’état du contenu non valide est déterminé, une icône apparaît à l’intérieur du contrôle ou juste à côté. Une info-bulle décrivant l’erreur doit apparaître sur le pointeur de l’icône ou du contrôle. En outre, une bordure de 1 pixel doit apparaître autour du contrôle qui crée l’état non valide.

Field validation layout specifications

Spécifications de disposition pour la validation de champ

Variantes acceptables pour l’emplacement de l’icône

Il existe d’innombrables cas uniques dans lesquels les utilisateurs doivent être informés des erreurs de validation. Compte tenu du type de contrôle et de la configuration de l’interface utilisateur, choisissez l’emplacement de l’icône approprié à votre situation.

Acceptable locations for icon location

Variantes acceptables pour les emplacements des icônes de validation de champ

Validation nécessitant un aller-retour vers un serveur ou une connexion réseau

Dans certains cas, un aller-retour vers le serveur est nécessaire pour vérifier le contenu, et il serait important d’afficher la progression de l’utilisateur, vérifié et les états d’erreur. La figure ci-dessous illustre un exemple de ce cas et de l’interface utilisateur recommandée.

Validation involving a round trip to a server

Validation impliquant un aller-retour vers un serveur

Notez que l’espace disponible adéquat à droite du contrôle doit être fourni pour prendre en charge la « vérification ... » et texte « Réessayer ».

Texte d’avertissement sur place

Lorsqu’il existe une salle disponible pour placer le message d’erreur près du contrôle dans un état d’erreur, il est préférable d’utiliser l’info-bulle seule.

In-place warning

Texte d’avertissement sur place

Filigranes

Parfois, un contrôle ou une fenêtre entière est dans un état d’erreur. Dans ce cas, utilisez un filigrane pour indiquer l’erreur.

Watermark

Validation du champ filigrane