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 Windows Desktop.Most common controls used in the Visual Studio interface should follow the Windows Desktop interaction guidelines. Cette rubrique est spécifique à Visual Studio et couvre des situations particulières ou des détails augmentent ces 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 lors de la stylisation de contrôles est que les contrôles seront utilisés 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 dans l’interface utilisateur standard sont l’interface utilisateur sans thème et doivent respecter style normal de Windows Desktop, 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.

  • Boîtes de dialogue standard (utilitaire) : pas à thème.Standard (utility) dialogs: not themed. Ne pas re-template.Don't re-template. Utilisez 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é 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 modèles courants d’interaction pour Windows les barres de défilement , sauf si elles sont augmentées 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 le instructions Windows Desktop 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 servir dans les boîtes de dialogue à thème et des fenêtres Outil.Themed input fields should only be used in themed dialogs and tool windows.

Interactions spécialiséesSpecialized interactions

  • Champs en lecture seule aura un arrière-plan 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 champs doivent avoir <requis > en tant que filigranes en leur sein.Required fields should have <Required> as watermarks within them. Vous ne devez pas modifier la couleur d’arrière-plan, sauf dans de 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 d’arbitrairement correspond à la longueur d’un champ long, par exemple, 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 incorrecte : il est peu probable que le nom sera ce long. Incorrect input field length: it's unlikely that the name will be this long.
    Longueur de champ d’entrée incorrecte : il est peu probable que le nom sera 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 le instructions de bureau de Windows pour les listes déroulantes et des 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 listes 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 listes déroulantes doivent être dimensionnés en fonction du contenu, ne pas à la largeur de la fenêtre dans lequel elles sont affichées, ni d’arbitrairement correspond à la longueur d’un champ long, par exemple, 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 s’affichera. 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 s’affichera.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 longs. 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 longs.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 le instructions de bureau de 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ée sur le texte. Incorrect: the check box is centered on the text.
    Incorrecte : la case à cocher est centrée 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 le instructions Windows Desktop pour les boutons radio.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 pour encadrer les choix de cases d’option, sauf si vous avez besoin de 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 le les instructions pour les cadres de groupe Windows Desktop.For typical interaction behavior, follow the Windows Desktop guidelines for group frames.

Style visuelVisual style

Dans les boîtes de dialogue utilitaire n’appliquer un 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 pour encadrer les choix de cases d’option, sauf si vous avez besoin de 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 d’image 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 peuvent 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 souhaite 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 les changements de groupe d’informations 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 façons d’afficher des 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 quand 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 vraiment nécessaires.Decide if the extra lines of a box are really necessary. Un exemple est l’affichage d’un chemin de répertoire dans une section créé 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:

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 des informations permet 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 similaire, Placez le texte statique à l’intérieur d’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 dont la couleur 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 marqueur de 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é, telles que l’activation/désactivation d’une case à cocher ou de sélection/désélection d’un bouton radio.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 actif 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, affichage des états actifs et inactifsRead-only text box, showing inactive and active states
Zone de texte en lecture seule, affichage des états actifs et inactifsRead-only text box, showing inactive and active states

En utilisant le 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 commencent par 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.

    Suivent des contrôles de texte dans les boîtes de dialogue à thème instructions de l’expérience utilisateur de bureau Windows et n’effectuez pas de ponctuation de fin, à 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 des cases à cocher et des cases d’option commencent par un verbe, une majuscule initiale sur le premier mot uniquement et ne contenir 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.

  • Les étiquettes pour les boutons, les menus, les éléments de menu et les 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.

  • Dans la mesure du possible, avoir un auteur d’écrire ou approuver le texte avant d’entrer au développeur pour 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 d’encombrer les boîtes de dialogue simples.Helper text should be used only when needed to avoid cluttering simple dialogs. Deux variantes de texte d’assistance sont filigrane et la boîte de dialogue.The two variations of helper text are dialog and watermark.

Suivez les emplacements courants pour le texte d’aide et être 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’assistance 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.

  • Filigrane de texte dans un éditeur vide, pour expliquer l’action de l’utilisateur à effectuer pour commencer.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é.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 ou modifier le texte réel.User assistance can write/edit the actual text.

FiligranesWatermarks

Boîtes de dialogue bénéficient de recommandations de filigrane légèrement différente.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 texte), en particulier lorsque celles 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 s’affiche en gris foncé (VSColor : ButtonShadow).The text appears in dark gray (VSColor: ButtonShadow). Toutefois, si le filigrane s’affiche sur un gris moyen ou une autre couleur (VSColor : ButtonFace) en arrière-plan, puis il est concernent sur sa lisibilité, accédez avec texte 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).

  • Filigranes peuvent être centrés ou aligné à gauche.Watermarks can be centered or flush left. Appliquer des règles de conception standard lors des décisions d’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) spécifiques au contexteContext-specific (dynamic) text

Texte dynamique peut être utilisé de deux manières différentes dans une boîte de dialogue ou l’interface utilisateur non modale : sous forme d’étiquette 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 offrent plus d’informations pour l’élément sélectionné, comme dans une boîte de dialogue qui contient une liste d’éléments et propriétés pour les éléments affichés dans une grille à 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 être dynamique afin que lorsqu’un élément est sélectionné sur la gauche, la grille à droite affiche les informations de 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 soyez vigilant ne pas abuser.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 aient 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 des conseils de Windows Desktop base sur les liens hypertexte pour l’utilisation, le libellé, dimensionnement et 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és 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 windows utilisé pour recueillir l’entrée ou faire des choix, même si elles sont des commandes secondairesDisplaying windows used to gather input or making choices, even if they are secondary commands

  • Actions destructrices 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 pour l’étiquette.Avoid command buttons in tool windows, or if you need more than two words for the label. 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, document ou page webNavigation to another window, document, or web page

  • Situations nécessitant une étiquette plus longue ou courte 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 étroite où un bouton serait surcharger l’interface utilisateur, à condition que l’action n’est pas destructifs 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 peu 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 peu d’attentionLinks used for secondary commands where buttons would attract too much attention

Boutons courantsCommon buttons

TexteText

Suivez les instructions de l’écriture de l’interface utilisateur 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 s’affiche dans les boîtes de dialogue utilitaire et ne doit pas être filtrables.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 ces boutons doivent être présentent en conséquence.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 de...Browse... buttons

[Parcourir...] boutons sont utilisés dans les grilles, les 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 permettant la navigation.If there is more than one long [Browse...] button in a dialog, like when several fields allow for browsing. Utilisez court [...] bouton pour chacun d’eux à éviter les clés d’accès à confusion créées par cette situation (& Parcourir et & rcourir le 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.

Instructions 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 adjacentes.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 remplira.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 ci-dessous 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) afin que l’écran lecteurs lue en tant que « Browse » 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 le AccessibleName propriété.For managed controls, this means setting the AccessibleName property.

  • N’utilisez jamais de points de suspension [...] bouton pour quoi que ce soit, à l’exception d’une action de navigation.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 x 23 75 pixels et version courte 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 entre contrôle connexe et de pixels de bouton 7 Parcourir standards, l’espacement entre le contrôle concerné 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 graphique et n’incluez jamais de texte pour économiser 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 les autres listes pouvant être triés.These are often used in field pickers and other sortable lists.

Remarque : les utilisateurs doivent TAB pour accéder à ces boutons (il n’existe 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. Carte le 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
Ajouter toutAdd All Bouton graphique « Ajouter tout »Graphical "Add All" button
Supprimer toutRemove 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 de graphique sur le bouton, avec et sans affichage de couleur transparenteAppearance of a graphical image on button, with and without transparent color showing
Apparence d’une image de graphique sur le bouton, avec et sans affichage de couleur transparenteAppearance of a graphical image on button, with and without transparent color showing

Des liens hypertexte sont bien adaptés aux actions de navigation telles que l’ouverture d’une rubrique d’aide, une boîte de dialogue modale ou un 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 sensible à 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 de validation à 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 le conseils Windows Desktop pour le texte de l’interface utilisateur.Follow the Windows Desktop guidance for user interface text. N’utilisez pas « En savoir plus à propos, » « Dire me plus sur » ou « Get help avec ce » 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 The 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 le contrôle positionné état sauf si le lien est un fragment de phrase au sein d’une phrase complète, comme dans un filigrane des soulignements.Don't include underlines at the control resting state unless the link is a sentence fragment within a full sentence, like in a watermark.

  • Soulignements ondulés ne doit pas s’affichent au pointage.Underlines shouldn't appear on hover. Au lieu de cela, les commentaires à l’utilisateur que le lien est actif sont un changement 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 les é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 des actions.Each item within a tree view can be selected to provide further action.

Style visuel de vue arborescenceTree view visual style

DéveloppeursExpanders

Contrôles d’arborescence doivent être conforme à la conception de l’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 mettre en évidence ou masquer des éléments sous-jacents.Each node uses an expander control to reveal or hide underlying items. À l’aide d’un contrôle expander fournit une 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é de nœud d’arborescence à l’aide d’un contrôle expanderCorrect: proper style of tree view node using an expander control
Correct : style approprié de nœud d’arborescence à l’aide d’un contrôle expanderCorrect: proper style of tree view node using an expander control

Incorrect : le style incorrect de nœud d’arborescenceIncorrect: improper style of tree view node
Incorrect : 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 se développer pour la largeur totale 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 quel élément qu’ils ont sélectionnées.This helps users clearly identify which item they have selected. Couleurs de la sélection doivent refléter le thème de Visual Studio actuel.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.

Incorrect : 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.
Incorrect : 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és uniquement dans les listes hétérogènes dans lequel les icônes communiquent les informations pour 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 peuvent fréquemment être vu comme un 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 serait si l’icône est dynamique et est utilisée 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 pour être masquées ou semi-transparent dans une fenêtre de défilement et s’affichent lorsque la fenêtre contenant 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 deux barres de défilement horizontales et verticales sont affichées, 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 deux barres de défilement horizontales et verticales sont affichées, 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 appuyé sur la touche de Menu 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 qu’il est sélectionné.It's important that the node gains focus and is selected. Cela permet à l’utilisateur d’identifier quel élément auquel appartient le sous-menu.This helps the user identify which item the submenu belongs to.

L’élément produisant a le focus de gains de menu contextuel pour notifier l’utilisateur auquel l’élément 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 produisant a le focus de gains de menu contextuel pour notifier l’utilisateur auquel l’élément 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 des é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 à nos exigences en termes 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 : en remontant l’arborescence pour sélectionner des élémentsUp Arrow: Select items by moving up the tree

  • Flèche vers le bas : sélectionner des éléments en déplaçant vers le bas de l’arborescenceDown Arrow: Select items by moving down the tree

  • Flèche droite : développer 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 contienne une arborescence dans une grille.A trid control is a complex control that contains a tree view within a grid. Développement, la réduction et la navigation dans l’arborescence doivent respecter les mêmes commandes de 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