Modèles de contrôle courants pour Visual StudioCommon Control Patterns for Visual Studio

Contrôles communsCommon controls

Vue d'ensembleOverview

Contrôles communs constituent la majeure partie de l’interface utilisateur dans Visual Studio.Common controls make up the majority of the user interface in Visual Studio. Contrôles les plus courants utilisés dans l’interface de Visual Studio doivent suivre le directives d’interaction de bureau Windows.Most common controls used in the Visual Studio interface should follow the Windows Desktop interaction guidelines. Cette rubrique est spécifique à Visual Studio et traite des situations particulières ou des détails qui augmentent les instructions de Windows.This topic is specific to Visual Studio and covers special situations or details that augment those Windows guidelines.

Contrôles communs dans cette rubriqueCommon controls in this topic

Style visuelVisual style

La première chose à prendre en compte lorsque les styles de contrôles est que les contrôles seront utilisées dans l’interface utilisateur à thème.The first thing to consider when styling controls is whether the controls will be used in themed UI. Contrôles d’interface utilisateur standard sont l’interface utilisateur sans thème et doivent respecter style normal de bureau Windows, ce qui signifie qu’ils ne sont pas re-basé sur un modèle et qu’il doivent apparaître dans leur apparence de contrôle par défaut.Controls in standard UI are non-themed UI and must follow normal Windows Desktop style, meaning that they are not re-templated and should appear in their default control appearance.

  • Les boîtes de dialogue standard (utilitaire) : pas à thème.Standard (utility) dialogs: not themed. Ne pas remodéliser.Don't re-template. Utiliser les valeurs par défaut du style de contrôle de base.Use basic control style defaults.

  • Outil windows, les éditeurs de document, les aires de conception et les boîtes de dialogue à thème : utiliser spécialisée apparence à thème à l’aide du service de couleur.Tool windows, document editors, design surfaces and themed dialogs: Use specialized themed appearance using the color service.

Barres de défilementScroll bars

Barres de défilement doivent suivre barres de défilement des modèles courants d’interaction pour Windows , sauf si elles sont augmentés avec les informations de contenu, comme dans l’éditeur de code.Scroll bars should follow common interaction patterns for Windows scroll bars unless they're augmented with content information, like in the code editor.

Champs d’entréeInput fields

Pour le comportement de l’interaction typique, suivez les des recommandations de bureau Windows pour les zones de texte.For typical interaction behavior, follow the Windows Desktop guidelines for text boxes.

Style visuelVisual style

  • Champs d’entrée ne doit pas être un style dans les boîtes de dialogue utilitaire.Input fields shouldn't be styled in utility dialogs. Utiliser le style de base intrinsèque au contrôle.Use the basic style intrinsic to the control.

  • Les champs d’entrée à thème doivent uniquement être utilisés dans les fenêtres Outil et les boîtes de dialogue à thème.Themed input fields should only be used in themed dialogs and tool windows.

Interactions spécialiséesSpecialized interactions

  • Les champs en lecture seule aura un arrière-plan de gris (désactivé), mais de premier plan par défaut (actif).Read-only fields will have a gray (disabled) background but default (active) foreground.

  • Requis des champs doivent avoir <requis > en tant que filigranes dans celles-ci.Required fields should have <Required> as watermarks within them. Vous ne devez pas modifier la couleur d’arrière-plan, sauf dans les rares cas.You should not change the color of the background except in rare situations.

  • Validation des erreurs : consultez Notifications et progression pour Visual StudioError validation: See Notifications and Progress for Visual Studio

  • Champs d’entrée doivent être dimensionnées en fonction du contenu, ne pas à la largeur de la fenêtre dans lequel elles sont affichées, ni à arbitrairement correspond à la longueur d’un champ long, comme un chemin d’accès.Input fields should be sized to fit the content, not to fit the width of the window in which they are shown, nor to arbitrarily match the length of a long field, like a path. Longueur peut être une indication à l’utilisateur de limitations concernant le nombre de caractères est autorisé dans le champ.Length might be an indication to the user of limitations as to how many characters are allowed in the field.

    Longueur de champ d’entrée incorrect : il est peu probable que le nom doit être ce long. Incorrect input field length: it's unlikely that the name will be this long.
    Longueur de champ d’entrée incorrect : il est peu probable que le nom doit être ce long.Incorrect input field length: it's unlikely that the name will be this long.

    Corriger la longueur de champ d’entrée : le champ d’entrée est une largeur raisonnable pour le contenu attendu. Correct input field length: the input field is a reasonable width for the expected content.
    Corriger la longueur de champ d’entrée : le champ d’entrée est une largeur raisonnable pour le contenu attendu.Correct input field length: the input field is a reasonable width for the expected content.

Zones de liste déroulante et les listes déroulantesCombo boxes and drop-down lists

Pour le comportement de l’interaction typique, suivez les des recommandations de bureau Windows pour les listes déroulantes et les zones de liste déroulante.For typical interaction behavior, follow the Windows Desktop guidelines for drop-down lists and combo boxes.

Style visuelVisual style

  • Dans les boîtes de dialogue utilitaire, ne pas remodéliser le contrôle.In utility dialogs, don't re-template the control. Utiliser le style de base intrinsèque au contrôle.Use the basic style intrinsic to the control.

  • Dans l’interface utilisateur à thème, zones de liste déroulante et les zones déroulantes suivent les thèmes standard pour les contrôles.In themed UI, combo boxes and drop-downs follow the standard theming for the controls.

Mise en pageLayout

Zones de liste déroulante et les zones déroulantes doivent être dimensionnées en fonction du contenu, ne pas à la largeur de la fenêtre dans lequel elles sont affichées, ni à arbitrairement correspond à la longueur d’un champ long, comme un chemin d’accès.Combo boxes and drop-downs should be sized to fit the content, not to fit the width of the window in which they are shown, nor to arbitrarily match the length of a long field, like a path.

Incorrecte : la largeur de la liste déroulante est trop longue pour le contenu qui sera affiché. Incorrect: the drop-down width is too long for the content that will be displayed.
Incorrecte : la largeur de la liste déroulante est trop longue pour le contenu qui sera affiché.Incorrect: the drop-down width is too long for the content that will be displayed.

Correct : la liste déroulante est dimensionnée pour permettre la croissance de traduction, mais pas inutilement long. Correct: the drop-down is sized to allow for translation growth, but not unnecessarily long.
Correct : la liste déroulante est dimensionnée pour permettre la croissance de traduction, mais pas inutilement long.Correct: the drop-down is sized to allow for translation growth, but not unnecessarily long.

Cases à cocherCheck boxes

Pour le comportement de l’interaction typique, suivez les des recommandations de bureau Windows pour les cases à cocher.For typical interaction behavior, follow the Windows Desktop guidelines for check boxes.

Style visuelVisual style

  • Dans les boîtes de dialogue utilitaire, ne pas remodéliser le contrôle.In utility dialogs, don't re-template the control. Utiliser le style de base intrinsèque au contrôle.Use the basic style intrinsic to the control.

  • Dans l’interface utilisateur à thème, cases à cocher suivent les thèmes standard pour les contrôles.In themed UI, check boxes follow the standard theming for the controls.

Interactions spécialiséesSpecialized interactions

  • Interaction avec une case à cocher ne doit jamais affiche une boîte de dialogue ou accéder à une autre zone.Interaction with a check box must never pop a dialog or navigate to another area.

  • Aligner les cases à cocher avec la ligne de base de la première ligne de texte.Align check boxes with the baseline of the first line of text.

    Incorrecte : la case à cocher est centré sur le texte. Incorrect: the check box is centered on the text.
    Incorrecte : la case à cocher est centré sur le texte.Incorrect: the check box is centered on the text.

    Correct : la case à cocher est aligné avec la première ligne du texte. Correct: the check box is aligned with the first line of the text.
    Correct : la case à cocher est aligné avec la première ligne du texte.Correct: the check box is aligned with the first line of the text.

Cases d’optionRadio buttons

Pour le comportement de l’interaction typique, suivez les des recommandations de bureau Windows pour les cases d’option.For typical interaction behavior, follow the Windows Desktop guidelines for radio buttons.

Style visuelVisual style

Dans les boîtes de dialogue utilitaire, n'effectuez pas les boutons de case d’option de style.In utility dialogs, do not style radio buttons. Utiliser le style de base intrinsèque au contrôle.Use the basic style intrinsic to the control.

Interactions spécialiséesSpecialized interactions

Il n’est pas nécessaire d’utiliser un cadre de groupe à placer les choix de cases d’option, sauf si vous avez besoin maintenir la distinction de groupe dans une disposition étroite.It's not necessary to use a group frame to enclose radio choices, unless you need to maintain group distinction in a tight layout.

Images de groupeGroup frames

Pour le comportement de l’interaction typique, suivez les des recommandations de bureau Windows pour les images de groupe.For typical interaction behavior, follow the Windows Desktop guidelines for group frames.

Style visuelVisual style

Dans l’utilitaire de boîtes de dialogue, ne style cadres de groupe.In utility dialogs, don't style group frames. Utiliser le style de base intrinsèque au contrôle.Use the basic style intrinsic to the control.

Mise en pageLayout

  • Il n’est pas nécessaire d’utiliser un cadre de groupe à placer les choix de cases d’option, sauf si vous avez besoin maintenir la distinction de groupe dans une disposition étroite.It's not necessary to use a group frame to enclose radio choices, unless you need to maintain group distinction in a tight layout.

  • N’utilisez jamais un cadre de groupe pour un seul contrôle.Never use a group frame for a single control.

  • Parfois, il est acceptable d’utiliser une règle horizontale au lieu d’un conteneur de frame de groupe.It's sometimes acceptable to use a horizontal rule instead of a group frame container.

Contrôles de texteText controls

Champs de texte statiqueStatic text fields

Un champ de texte statique présente des informations en lecture seule et ne peut pas être sélectionné par l’utilisateur.A static text field presents read-only information and cannot be selected by the user. Évitez de l’utiliser pour le texte que l’utilisateur peut souhaiter à copier dans le Presse-papiers.Avoid using it for any text the user might want to copy to the clipboard. Toutefois, le texte statique en lecture seule peut modifier pour refléter un changement d’état.However, read-only static text can change to reflect a change in state. Dans l’exemple ci-dessous, le texte statique de nom de sortie sous la modification des informations de groupe afin de refléter les modifications apportées à la zone de texte racine Namespace au-dessus de lui.In the example below, the Output Name static text under the Information group changes to reflect any changes made to the Root Namespace text box above it.

Il existe deux manières d’afficher les informations de texte statique.There are two ways to display static text information.

Texte statique peut être sur son propre dans une boîte de dialogue sans toute relation contenant-contenu lorsqu’il n’existe aucun conflit de regroupement.Static text can be on its own in a dialog without any containment when there is no grouping conflict. Décider si les lignes supplémentaires d’une zone sont réellement nécessaires.Decide if the extra lines of a box are really necessary. Un exemple est l’affichage d’un chemin d’accès de répertoire sous une section créée par une ligne de groupe, comme indiqué ci-dessous :An example is the display of a directory path under a section created by a group line, as shown below:

Les informations de texte statique dans les contrôles de texteStatic text info in text controls
Informations de texte statique dans les contrôles de texteStatic text info in text controls

Dans une boîte de dialogue lorsque d’autres zones groupées existent et relation contenant-contenu de l’information peut vous aider à une meilleure lisibilité, et lorsque une section peut être masquée ou affichée (comme dans le fenêtre Propriétés volet description) ou vous souhaitez être cohérent avec l’interface utilisateur similaires, Placez le texte statique dans une zone.In a dialog where other grouped areas exist and containment of the information would help readability, and when a section can be hidden or shown (as in the Properties window description pane) or you want to be consistent with similar UI, place the static text inside a box. Cette zone de groupe doit être une seule règle et de couleur avec la ButtonShadow:This group box should be a single rule and colored with the ButtonShadow:

Texte statique dans la fenêtre PropriétésStatic text in the Properties window
Texte statique dans la fenêtre PropriétésStatic text in the Properties window

Zone de texte en lecture seuleRead-only text box

Cela permet à l’utilisateur à sélectionner le texte dans le champ, mais pas le modifier.This allows the user to select the text inside the field but not edit it. Ces zones de texte sont délimitées par le biseau 3D habituel avec un ButtonShadow remplissage.These text boxes are bordered by the usual 3-D chisel with a ButtonShadow fill.

Une zone de texte peut devenir active (modifiable) lorsqu’un utilisateur modifie un contrôle associé, tel que vérification/si vous décochez une case à cocher ou en sélectionnant/en désactivant une case d’option.A text box can become active (editable) when a user alters an associated control, such as checking/unchecking a check box or selecting/deselecting a radio button. Par exemple, dans le outils > Options page illustré ci-dessous, le Page d’accueil zone de texte devient active lorsque le par défaut case à cocher est désactivée.For example, in the Tools > Options page shown below, the Home Page text box becomes active when the Use Default check box is unchecked.

Zone de texte en lecture seule, affichant les états inactif et actifRead-only text box, showing inactive and active states
Zone de texte en lecture seule, affichant les états inactif et actifRead-only text box, showing inactive and active states

Utilisation de texte dans les boîtes de dialogueUsing text in dialogs

Recommandations principales du texte dans les boîtes de dialogue :Key guidelines for text in dialogs:

  • Étiquettes pour les zones de texte, des zones de liste et des images dans les boîtes de dialogue unthemed démarrer avec un verbe, ont un capital initial sur le premier mot uniquement et se terminent par un signe deux-points.Labels for text boxes, list boxes, and frames in unthemed dialogs start with a verb, have an initial capital on the first word only, and end with a colon.

    Contrôles de texte dans les boîtes de dialogue à thème suivent des recommandations UX bureau Windows ne prennent pas de ponctuation, à l’exception des points d’interrogation dans les liens d’aide.Text controls in themed dialogs follow Windows desktop UX guidelines and do not take end punctuation, with the exception of question marks in Help links.

  • Étiquettes pour les cases à cocher et des cases d’option Démarrer avec un verbe, la première lettre en majuscule sur le premier mot uniquement et aucun signe de ponctuation final.Labels for check boxes and option buttons start with a verb, an initial capital on the first word only, and have no ending punctuation.

  • Étiquettes de boutons, des menus, des éléments de menu et des onglets ont majuscules sur chaque mot (majuscule).Labels for buttons, menus, menu items, and tabs have initial capitals on each word (title case).

  • Terminologie de l’étiquette doit être cohérente avec les étiquettes similaire dans les autres boîtes de dialogue.Label terminology should be consistent with similar labels in other dialogs.

  • Si possible, avoir un auteur écrire ou d’approuver le texte avant d’entrer au développeur de l’implémentation.If possible, have a writer/editor write or approve the text before it goes to the developer for implementation.

  • Tous les contrôles doivent comporter des étiquettes, sauf dans des circonstances particulières dans les tabulation est suffisante.All controls should have labels except in special circumstances in which tabbing is sufficient. Utilisez le texte d’aide lorsque cela est approprié.Use helper text when appropriate.

Texte d’aideHelper text

Inclus dans les boîtes de dialogue pour aider l’utilisateur à comprendre l’objectif de la boîte de dialogue ou pour indiquer l’action à effectuer.Included in dialogs to help the user understand the dialog's purpose or to indicate which action to take. Texte d’aide doit être utilisé uniquement si nécessaire pour éviter de surcharger les boîtes de dialogue simples.Helper text should be used only when needed to avoid cluttering simple dialogs. Deux variantes de texte d’aide sont la boîte de dialogue et le filigrane.The two variations of helper text are dialog and watermark.

Suivez les emplacements courants pour le texte d’aide et soyez sélectif avec l’introduction de nouveaux domaines.Follow common locations for helper text and be selective in introducing new areas. Scénarios courants pour le texte d’aide sont :Common scenarios for helper text are:

  • Texte d’aide dans les boîtes de dialogue, pour donner des instructions supplémentaires sur la façon d’interagir avec une boîte de dialogue complexe.Helper text in dialogs, to give additional direction about how to interact with a complex dialog.

  • Texte de filigrane dans les fenêtres Outil vide ou des boîtes de dialogue, pour expliquer la raison pour laquelle aucun contenu n’est visible.Watermark text in empty tool windows or dialogs, to explain why no content is visible.

  • Un volet de description, comme en bas de la fenêtre Propriétés.A description pane, like at the bottom of the Properties window.

  • Texte dans un éditeur vide, pour expliquer l’action que l’utilisateur doit entreprendre pour la prise en main de filigrane.Watermark text in an empty editor, to explain what action the user should take to get started.

Texte d’assistance de boîte de dialogueDialog helper text

Un concepteur d’expérience utilisateur peut aider à déterminer quand le texte d’aide est appropriée.A user experience designer may help determine when helper text is appropriate. Le concepteur peut définir où le texte d’aide s’affiche, ainsi que son contenu général.The designer can define where helper text appears as well as its general content. Assistance utilisateur peut écriture/modification du texte.User assistance can write/edit the actual text.

FiligranesWatermarks

Boîtes de dialogue de tirent parti de recommandations de filigrane légèrement différent.Dialogs benefit from slightly different watermark guidelines. Car une boîte de dialogue peut apparaître occupé avec nombreux éléments d’interface utilisateur (étiquettes, texte d’indication, boutons et autres contrôles conteneurs avec du texte), en particulier quand les s’affichent en noir, filigranes évidence en gris foncé (VSColor : ButtonShadow).Because a dialog can appear busy with many UI elements (labels, hint text, buttons and other container controls with text), particularly when those appear in black, watermarks stand out better in dark gray (VSColor: ButtonShadow). En règle générale, un filigrane s’affiche à l’intérieur d’un contrôle comme une zone de liste avec un arrière-plan blanc (VSColor : Window).Typically a watermark appears inside a control like a list box with a white background (VSColor: Window).

  • Le texte apparaît en gris foncé (VSColor : ButtonShadow).The text appears in dark gray (VSColor: ButtonShadow). Toutefois, si le filigrane s’affiche sur un gris ou une autre couleur (VSColor : ButtonFace) en arrière-plan et qu’il existe concernent sur sa lisibilité, accédez avec texte en noir (VSColor : WindowText).However, if the watermark appears on a medium gray or other-colored (VSColor: ButtonFace) background and there is concern about its readability, go with black text (VSColor: WindowText).

  • Les filigranes peuvent être centrés ou aligné à gauche.Watermarks can be centered or flush left. Appliquer des règles de conception standard lors de la prise de décisions alignement.Apply standard design rules when making alignment decisions. Impossible de sélectionner le filigrane sur l’arrière-plan.The watermark cannot be selected on the background.

Exemple de texte de filigrane
Exemple de texte de filigraneWatermark text example

Texte (dynamique) de spécifique au contexteContext-specific (dynamic) text

Texte dynamique peut être utilisé de deux façons dans une boîte de dialogue ou une interface utilisateur non modale : comme étiquette de dynamique ou en tant que contenu dynamique.Dynamic text can be used one of two ways in a dialog or modeless UI: either as a dynamic label or as dynamic content.

  • Étiquette dynamique : une utilisation courante du texte dynamique est dans les panneaux descriptifs qui contiennent des informations supplémentaires pour l’élément sélectionné, comme dans une boîte de dialogue contient une liste d’éléments et les propriétés de ces éléments s’affichés dans une grille située à droite.Dynamic label: a common use of dynamic text is in descriptive panels that offer more information for the selected item, such as in a dialog which contains a list of elements and properties for those elements displayed in a grid to the right. L’étiquette de la grille des propriétés peut être dynamique pour que lorsqu’un élément est sélectionné sur la gauche, la grille située à droite affiche des informations pour cet élément spécifique.The label for the property grid may be dynamic so that when an item is selected on the left, the grid to the right shows information for that specific item.

  • Texte dynamique : peut être utile dans les cas où vous avez besoin afficher des informations spécifiques et non les informations de cette façon, mais doit veiller à n'abusez pas.Dynamic text: can be useful in instances where you need to display specific information and not general information in this way, but care should be taken to not overuse.

Si vous souhaitez que les utilisateurs ont la possibilité de copier les informations, texte dynamique doit être dans un champ de texte en lecture seule.If you want users to have the ability to copy the info, dynamic text should be in a read-only text field.

Vue d'ensembleOverview

Contrôles de boutons et de liens (liens) doivent suivre conseils de bureau Windows de base sur les liens hypertexte pour l’utilisation, formulation de dimensionnement et de l’espacement.Buttons and link controls (hyperlinks) should follow basic Windows Desktop guidance on hyperlinks for usage, wording, sizing, and spacing.

En règle générale, les boutons ont été utilisées pour les actions et des liens hypertexte qui ont été réservées pour la navigation.Traditionally, buttons have been used for actions and hyperlinks have been reserved for navigation. Boutons peuvent être utilisés dans tous les cas, mais le rôle de liens a été développé dans Visual Studio afin que les boutons et les liens ne sont plus interchangeables dans certaines conditions.Buttons may be used in all cases, but the role of links has been expanded in Visual Studio so that buttons and links are more interchangeable in some conditions.

Quand utiliser les boutons de commande :When to use command buttons:

  • Commandes principalesPrimary commands

  • Affichage de windows utilisée pour recueillir l’entrée ou déterminants, même si elles sont des commandes secondairesDisplaying windows used to gather input or making choices, even if they are secondary commands

  • Actions de destructeurs ou irréversiblesDestructive or irreversible actions

  • Boutons d’engagement dans les Assistants et les flux de pageCommitment buttons within wizards and page flows

Éviter les boutons de commande dans les fenêtres Outil, ou si vous avez besoin de plus de deux mots de l’étiquette.Avoid command buttons in tool windows, or if you need more than two words for the label. Des liens peuvent avoir des étiquettes de plus de temps.Links can have longer labels.

Quand utiliser des liens :When to use links:

  • Navigation vers une autre fenêtre, un document ou page webNavigation to another window, document, or web page

  • Situations qui nécessitent une étiquette plus longue ou une phrase pour décrire l’objectif de l’actionSituations that require a longer label or short sentence to describe the intent of the action

  • Espaces étroits où un bouton serait surcharger l’interface utilisateur, à condition que l’action n’est pas destructeur ou irréversibleTight spaces where a button would overwhelm the UI, provided that the action is not destructive or irreversible

  • Minimise les commandes secondaires dans les situations où il existe de nombreuses commandesDe-emphasizing secondary commands in situations where there are many commands

ExemplesExamples

Liens utilisés dans la barre d’informations suivant un message d’état de la commandeCommand links used in the InfoBar following a status message
Commandes liens utilisés dans la barre d’informations suivant un message d’étatCommand links used in the InfoBar following a status message

Liens utilisés dans la fenêtre contextuelle CodeLensLinks used in the CodeLens popup
Liens utilisés dans la fenêtre contextuelle CodeLensLinks used in the CodeLens popup

Liens utilisés pour les commandes secondaire où boutons bénéficierait de trop d’attentionLinks used for secondary commands where buttons would attract too much attention
Liens utilisés pour les commandes secondaire où boutons bénéficierait de trop d’attentionLinks used for secondary commands where buttons would attract too much attention

Boutons courantsCommon buttons

TexteText

Suivez les instructions de l’écriture de UI texte et la terminologie.Follow the writing guidelines in UI text and terminology.

Style visuelVisual style

Standard (unthemed)Standard (unthemed)

La plupart des boutons dans Visual Studio apparaît dans les boîtes de dialogue utilitaire et ne doit pas être appelé.Most buttons in Visual Studio will appear in utility dialogs and should not be styled. Ils doivent refléter l’apparence standard des boutons comme stipulé par le système d’exploitation.They should reflect the standard appearance of buttons as dictated by the operating system.

À thèmeThemed

Dans certains cas, boutons peuvent être utilisées dans l’interface utilisateur de style et doivent être un style correctement ces boutons.In some instances, buttons may be used within styled UI and these buttons must be styled appropriately. Consultez boîtes de dialogue pour plus d’informations sur les contrôles à thème.See Dialogs for information on themed controls.

Boutons spéciauxSpecial buttons

Boutons de navigation...Browse... buttons

[Parcourir...] boutons sont utilisés dans les grilles, boîtes de dialogue et fenêtres Outil et autres éléments d’interface utilisateur non modales.[Browse...] buttons are used in grids, dialogs, and tool windows and other modeless UI elements. Ils affichent un sélecteur qui aide l’utilisateur à remplir une valeur dans un contrôle.They display a picker that assists the user in filling a value into a control. Il existe deux variantes de ce bouton, long et court.There are two variations of this button, long and short.

Le bouton long [Parcourir...]The long [Browse...] button
Le bouton long [Parcourir...]The long [Browse...] button

Le bouton court portant uniquement sur les points de suspension [...]The ellipsis-only short [...] button
Le bouton court portant uniquement sur les points de suspension [...]The ellipsis-only short [...] button

Quand utiliser le bouton court de points de suspension uniquement :When to use the ellipsis-only short button:

  • S’il existe plusieurs long [Parcourir...] bouton dans une boîte de dialogue, comme lorsque plusieurs champs Autoriser pour l’exploration.If there is more than one long [Browse...] button in a dialog, like when several fields allow for browsing. Utilisez court [...] bouton pour chacune d’elles éviter les confusion clés d’accès créés par cette situation (& Parcourir et B & taper dans la même boîte de dialogue).Use the short [...] button for each to avoid the confusing access keys created by this situation (&Browse and B&rowse in the same dialog).

  • Dans une boîte de dialogue étroite, ou lorsqu’il n’existe aucun emplacement raisonnable pour le bouton long.In a tight dialog, or when there is no reasonable place to put the long button.

  • Si le bouton apparaît dans un contrôle de grille.If the button will appear in a grid control.

Recommandations pour l’aide du bouton :Guidelines for using the button:

  • N’utilisez pas une clé d’accès.Don't use an access key. Pour accéder à l’aide du clavier, l’utilisateur doit de tabulation du contrôle adjacents.To access it using the keyboard, the user must tab from the adjacent control. Assurez-vous que l’ordre de tabulation est telle que n’importe quel bouton Parcourir immédiatement après le champ qui seront affichés.Ensure that the tab order is such that any browse button falls immediately after the field that it will fill. N’utilisez jamais un trait de soulignement sous la première période.Never use an underscore below the first period.

  • Définir le Microsoft Active Accessibility (MSAA) nom propriété Parcourir... (y compris les points de suspension) pour qui écran lecteurs lue en tant que « Parcourir » et pas « point-point-point » ou « période période-période. »Set the Microsoft Active Accessibility (MSAA) Name property to Browse... (including the ellipsis) so that screen readers will read it as "Browse" and not "dot-dot-dot" or "period-period-period." Pour les contrôles managés, cela signifie que la AccessibleName propriété.For managed controls, this means setting the AccessibleName property.

  • N’utilisez jamais de points de suspension [...] bouton pour l’action Parcourir.Never use an ellipsis [...] button for anything except a browse action. Par exemple, si vous avez besoin d’un [nouveau] bouton mais n’avez pas assez de place pour le texte, puis la boîte de dialogue doit être redéfinie.For example, if you need a [New...] button but don't have enough room for the text, then the dialog needs to be redesigned.

Dimensionnement et l’espacementSizing and spacing

Boutons de dimensionnement [Parcourir...] : version de la norme est 75 x 23 pixels et la version courte est 26 x 23 pixelsSizing [Browse...] buttons: standard version is 75x23 pixels, short version is 26x23 pixels
Bouton de dimensionnement [Parcourir...]Sizing [Browse...] buttons

Boutons d’espacement [Parcourir...] : espacement de contrôle et de pixels de bouton 7 Parcourir standards, l’espacement entre contrôle connexe et parcourir court bouton 5 pixelsSpacing [Browse...] buttons: spacing between related control and standard Browse button 7 pixels, spacing between related control and short Browse button 5 pixels
Bouton d'espacement [Parcourir...]Spacing [Browse...] buttons

Boutons graphiquesGraphical buttons

Certains boutons doivent toujours utiliser une image de graphique et n’incluez jamais de texte pour économiser de l’espace et éviter les problèmes de localisation.Some buttons should always use a graphical image and never include text to conserve space and avoid localization problems. Ceux-ci sont souvent utilisés dans les sélecteurs de champ et d’autres listes pouvant être triées.These are often used in field pickers and other sortable lists.

Remarque : les utilisateurs devront TAB pour accéder à ces boutons (il n’y a aucune clé d’accès), par conséquent, les placer dans un ordre cohérent.Note: Users have to tab to these buttons (there are no access keys), so place them in a sensible order. Mappage du name propriété du bouton à l’action nécessaire afin que les lecteurs d’écran interprètent correctement l’action du bouton.Map the name property of the button to the action that it takes so that screen readers correctly interpret the button action.

FonctionFunction BoutonButton
AjouterAdd Graphique bouton « Ajouter »Graphical "Add" button
RemoveRemove Graphique bouton « Supprimer »Graphical "Remove" button
Ajoutez tous lesAdd All Bouton graphique « Ajouter tout »Graphical "Add All" button
Supprimer tous lesRemove All Bouton graphique « Supprimer tout »Graphical "Remove All" button
MonterMove Up Bouton graphique « Monter »Graphical "Move Up" button
DescendreMove Down Bouton graphique « Descendre »Graphical "Move Down" button
SupprimerDelete Graphique bouton « Supprimer »Graphical "Delete" button
Dimensionnement et l’espacementSizing and spacing

Dimensionnement des boutons graphiques est identique à la version courte de la [Parcourir...] bouton (26 x 23 pixels) :Sizing for graphical buttons is the same as for the short version of the [Browse...] button (26x23 pixels):

Apparence d’une image graphique sur un bouton, avec et sans affichage de couleur transparenteAppearance of a graphical image on button, with and without transparent color showing
Apparence d’une image graphique sur un bouton, avec et sans affichage de couleur transparenteAppearance of a graphical image on button, with and without transparent color showing

Les liens hypertexte sont bien adaptés aux actions de navigation telles que l’ouverture d’une rubrique d’aide, boîte de dialogue modale ou l’Assistant.Hyperlinks are well suited to navigation-based actions, like opening a Help topic, modal dialog, or wizard. Si un lien hypertexte est utilisé pour une commande, il doit toujours afficher une modification visible et détectable à l’interface utilisateur.If a hyperlink is used for a command, it should always display a visible and noticeable change to the UI. En règle générale, les actions qui sont validées à une action (par exemple, enregistrer, Annuler et supprimer) sont communiquées mieux à l’aide d’un bouton.In general, actions that commit to an action (like Save, Cancel, and Delete) are better communicated using a button.

Style d’écritureWriting style

Suivez les des conseils de bureau Windows pour le texte de l’interface utilisateur.Follow the Windows Desktop guidance for user interface text. N’utilisez pas « En savoir plus sur, » « Indiquent me plus sur » ou « Obtenir plus d’informations » formulation.Don't use "Learn more about," "Tell me more about," or "Get help with this" phrasing. Au lieu de cela, une expression texte de lien d’aide en termes de la question principale ayant obtenu une réponse par le contenu d’aide.Instead, phrase Help link text in terms of the primary question answered by the Help content. Par exemple, «comment ajouter un serveur à l’Explorateur de serveurs ?»For example, "How do I add a server to the Server Explorer?"

Style visuelVisual style

  • Utilisent toujours des liens hypertexte le VSColor Service.Hyperlinks should always use The VSColor Service. Si un lien hypertexte n’est pas un style correctement, il clignote en rouge lorsqu’il est actif ou affiche une couleur différente après avoir visité.If a hyperlink is not styled correctly, it flashes red when active or shows a different color after being visited.

  • N’incluez pas soulignements au contrôle plaçant état sauf si le lien est un fragment de phrase au sein d’une phrase complète, comme dans un filigrane.Don't include underlines at the control resting state unless the link is a sentence fragment within a full sentence, like in a watermark.

  • Soulignement ne doit pas apparaître pointage.Underlines shouldn't appear on hover. Au lieu de cela, les commentaires à l’utilisateur que le lien est actif sont une modification de couleur légère et le curseur de lien approprié.Instead, the feedback to the user that the link is active is a slight color change and the appropriate link cursor.

Vues de l’arborescenceTree views

Vues de l’arborescence fournissent un moyen d’organiser complexe répertorie dans des groupes parent-enfant.Tree views provide a way to organize complex lists into parent-child groups. Un utilisateur peut développer ou réduire des groupes parents pour afficher ou masquer des éléments enfants sous-jacents.A user can expand or collapse parent groups to reveal or hide underlying child items. Chaque élément dans une vue d’arborescence peut être sélectionné pour fournir davantage d’action.Each item within a tree view can be selected to provide further action.

Style de vue visualTree view visual style

EXPANSEURSExpanders

Contrôles d’arborescence doivent être conforme à la conception du contrôle expander utilisée par Windows et Visual Studio.Tree view controls should conform to the expander design used by Windows and Visual Studio. Chaque nœud utilise un contrôle expander pour afficher ou masquer les éléments sous-jacents.Each node uses an expander control to reveal or hide underlying items. À l’aide d’un contrôle expander cohérence pour les utilisateurs peuvent rencontrer des arborescences différentes au sein de Windows et Visual Studio.Using an expander control provides consistency for users who might encounter different tree views within Windows and Visual Studio.

Correct : style approprié du nœud d’arborescence à l’aide d’un contrôle expanderCorrect: proper style of tree view node using an expander control
Correct : style approprié du nœud d’arborescence à l’aide d’un contrôle expanderCorrect: proper style of tree view node using an expander control

Incorrecte : le style incorrect de nœud d’arborescenceIncorrect: improper style of tree view node
Incorrecte : le style incorrect de nœud d’arborescenceIncorrect: improper style of tree view node

SélectionSelection

Lorsqu’un nœud est sélectionné dans l’arborescence, la mise en surbrillance doit développer sur toute la largeur du contrôle arborescence.When a node is selected within the tree view, the highlight should expand to the full width of the tree view control. Cela permet aux utilisateurs à identifier clairement les éléments qu’ils ont sélectionné.This helps users clearly identify which item they have selected. Couleurs de la sélection doivent refléter le thème de Visual Studio en cours.Selection colors should reflect the current Visual Studio theme.

Correct : mise en surbrillance du nœud sélectionné correspond à toute la largeur du contrôle arborescence. Correct: highlight of the selected node fits the entire width of the tree view control.
Correct : mise en surbrillance du nœud sélectionné correspond à toute la largeur du contrôle arborescence.Correct: highlight of the selected node fits the entire width of the tree view control.

Incorrecte : mise en surbrillance du nœud sélectionné ne tient pas toute la largeur du contrôle arborescence. Incorrect: highlight of the selected node doesn't fit the entire width of the tree view control.
Incorrecte : mise en surbrillance du nœud sélectionné ne tient pas toute la largeur du contrôle arborescence.Incorrect: highlight of the selected node doesn't fit the entire width of the tree view control.

IcônesIcons

Icônes doivent uniquement être utilisées dans les contrôles d’arborescence si ils permettent d’identifier visuellement les différences entre les éléments.Icons should only be used in tree view controls if they assist in visually identifying differences between items. En règle générale, les icônes doivent être utilisées uniquement dans les listes hétérogènes dans lesquels les icônes comportent des informations afin de différencier les types d’éléments.In general, icons should be used only in heterogeneous lists in which the Icons carry information to differentiate the types of elements. Dans une liste homogène à l’aide des icônes peut souvent être considérée comme bruit et doit être évitée.In a homogeneous list using icons can frequently be seen as noise and should be avoided. Dans ce cas, l’icône de groupe (parent) peut transmettre le type d’éléments qu’il contient.In that case the group icon (parent) can convey the type of items within it. L’exception à cette règle est si l’icône est dynamique et est utilisé pour indiquer l’état.The exception to this rule would be if the icon is dynamic and is used to indicate state.

Barres de défilementScroll bars

Barres de défilement doivent toujours être masquées si le contenu tient dans le contrôle arborescence.Scroll bars should always be hidden if the content fits within the tree view control. Il est acceptable pour les barres de défilement à masqué, transparent ou semi-transparent dans une fenêtre de défilement et s’affichent lorsque la fenêtre de l’arborescence a le focus ou lors de pointage de l’arborescence afficher lui-même.It is acceptable for scrollbars to be hidden, or semi-transparent in a scrollable window and appear when the window containing the tree view has focus, or upon hover of the tree view itself.

Les barres de défilement verticale et horizontale sont affichent, car le contenu a dépassé les limites du contrôle arborescence. Both vertical and horizontal scroll bars are displayed because the contents have exceeded the limits of the tree view control.
Les barres de défilement verticale et horizontale sont affichent, car le contenu a dépassé les limites du contrôle arborescence.Both vertical and horizontal scroll bars are displayed because the contents have exceeded the limits of the tree view control.

Interactions de vue d’arborescenceTree view interactions

Menus contextuelsContext menus

Un nœud d’arborescence peut révéler des options de sous-menu dans un menu contextuel.A tree view node can reveal submenu options in a context menu. En règle générale, cela se produit lorsqu’un utilisateur a cliqué un élément ou enfoncée la touche de Menu sur un clavier Windows avec l’élément sélectionné.Typically, this occurs when a user has right-clicked an item or pressed the Menu key on a Windows keyboard with the item selected. Il est important que le nœud Obtient le focus et est sélectionné.It's important that the node gains focus and is selected. Cela aide l’utilisateur à identifier l’élément auquel appartient le sous-menu.This helps the user identify which item the submenu belongs to.

L’élément qui a le focus de gains de menu contextuel pour informer l’utilisateur génèrent des élément qui a été sélectionné. The item that has generate the context menu gains focus to notify the user which item has been selected.
L’élément qui a le focus de gains de menu contextuel pour informer l’utilisateur génèrent des élément qui a été sélectionné.The item that has generate the context menu gains focus to notify the user which item has been selected.

ClavierKeyboard

L’arborescence doit fournir la possibilité de sélectionner les éléments et développer/réduire les nœuds à l’aide du clavier.The tree view should provide the ability to select items and expand/collapse nodes using the keyboard. Cela garantit que la navigation répond aux critères d’accessibilité.This ensures that navigation meets our accessibility requirements.

Contrôle d’arborescenceTree view control

Contrôles d’arborescence de Visual Studio doivent suivre la navigation au clavier courants :Visual Studio tree controls should follow common keyboard navigation:

  • Flèche vers le haut : sélectionner les éléments en remontant l’arborescenceUp Arrow: Select items by moving up the tree

  • Flèche vers le bas : sélectionner des éléments à l’arborescenceDown Arrow: Select items by moving down the tree

  • Flèche droite : développez un nœud dans l’arborescenceRight Arrow: Expand a node in the tree

  • Flèche gauche : réduire un nœud dans l’arborescenceLeft Arrow: Collapse a node in the tree

  • Entrez la clé : lancer, charger, exécuter l’élément sélectionnéEnter key: Initiate, load, execute selected item

Grid (vue de l’arborescence et affichage de grille)Trid (tree view and grid view)

Un contrôle Grid est un contrôle complexe qui contient une arborescence dans une grille.A trid control is a complex control that contains a tree view within a grid. Développement et réduction de parcourir l’arborescence doivent respecter les mêmes commandes clavier comme une arborescence, avec les ajouts suivants :Expanding, collapsing, and navigating the tree should respect the same keyboard commands as a tree view, with the following additions:

  • Flèche droite : développer un nœud.Right Arrow: Expand a node. Une fois que le nœud est développé, il doit continuer accédant à la colonne le plus proche sur la droite.After the node is expanded, it should continue navigating to the nearest column on the right. Navigation doit s’arrêter à la fin de la ligne.Navigation should stop at the end of the row.

  • Onglet : permet d’accéder à la cellule la plus proche sur la droite.Tab: Navigates to the nearest cell on the right. À la fin de la ligne, la navigation se poursuit à la ligne suivante.At the end of the row, navigation continues to the next row.

  • Maj + Tab : permet d’accéder à la cellule la plus proche sur la gauche.Shift + Tab: Navigates to the nearest cell on the left. Au début de la ligne, la navigation se poursuit à la cellule la plus à droite de la ligne précédente.At the beginning of the row, navigation continues to the rightmost cell in the previous row.

Un contrôle Grid dans Visual StudioA trid control in Visual Studio
Un contrôle Grid dans Visual StudioA trid control in Visual Studio