Freigeben über


Allgemeine Steuerelementmuster für Visual Studio

Allgemeine Steuerelemente

Allgemeine Steuerelemente bilden den Großteil der Benutzeroberfläche in Visual Studio. Die häufigsten Steuerelemente, die in der Visual Studio-Benutzeroberfläche verwendet werden, sollten den Windows Desktop-Interaktionsrichtlinien entsprechen. Dieses Thema ist spezifisch für Visual Studio und behandelt spezielle Situationen oder Details, die diese Windows-Richtlinien erweitern.

Allgemeine Steuerelemente in diesem Thema

Visueller Stil

Als Erstes sollten Sie beim Formatieren von Steuerelementen berücksichtigen, ob die Steuerelemente in designierten Ui-Elementen verwendet werden. Steuerelemente in standardbenutzeroberfläche sind nicht designierte Ui und müssen dem normalen Windows Desktop-Stil entsprechen, d. h., sie werden nicht neu zuweisen und sollten in ihrer Standardsteuerelementdarstellung angezeigt werden.

  • Standarddialogfeld (Hilfsprogramm): nicht designiert. Vorlage nicht erneut erstellen. Standardeinstellungen für standardsteuerelemente verwenden.

  • Toolfenster, Dokument-Editoren, Designoberflächen und designierte Dialogfelder: Verwenden Sie spezielle Designdarstellung mithilfe des Farbdiensts.

Bildlaufleisten

Bildlaufleisten sollten gängige Interaktionsmuster für Windows-Bildlaufleisten befolgen, es sei denn, sie werden mit Inhaltsinformationen wie im Code-Editor erweitert.

Eingabefelder

Befolgen Sie für typische Interaktionsverhalten die Windows Desktop-Richtlinien für Textfelder.

Visueller Stil

  • Eingabefelder sollten nicht in Hilfsdialogfeldern formatiert werden. Verwenden Sie die grundlegende formatinterne Formatvorlage für das Steuerelement.

  • Designeingabefelder sollten nur in Designdialogfeldern und Toolfenstern verwendet werden.

Spezielle Interaktionen

  • Schreibgeschützte Felder verfügen über einen grauen (deaktivierten) Hintergrund, aber standardmäßiges (aktives) Vordergrund.

  • Erforderliche Felder sollten <als Wasserzeichen darin enthalten> sein. Sie sollten die Farbe des Hintergrunds nicht ändern, außer in seltenen Situationen.

  • Fehlerüberprüfung: Siehe Benachrichtigungen und Fortschritt für Visual Studio

  • Eingabefelder sollten so angepasst werden, dass sie an den Inhalt angepasst werden, nicht an die Breite des Fensters, in dem sie angezeigt werden, oder beliebig mit der Länge eines langen Felds übereinstimmen, z. B. einem Pfad. Die Länge ist möglicherweise ein Hinweis für den Benutzer von Einschränkungen, wie viele Zeichen im Feld zulässig sind.

    Incorrect input field length: it's unlikely that the name will be this long.
    Falsche Länge des Eingabefelds: Es ist unwahrscheinlich, dass der Name so lang ist.

    Correct input field length: the input field is a reasonable width for the expected content.
    Richtige Länge des Eingabefelds: Das Eingabefeld ist eine angemessene Breite für den erwarteten Inhalt.

Kombinationsfelder und Dropdownlisten

Befolgen Sie für ein typisches Interaktionsverhalten die Windows Desktop-Richtlinien für Dropdownlisten und Kombinationsfelder.

Visueller Stil

  • Erstellen Sie in Hilfsdialogfeldern das Steuerelement nicht erneut. Verwenden Sie die grundlegende formatinterne Formatvorlage für das Steuerelement.

  • Auf der Designoberfläche entsprechen Kombinationsfelder und Dropdowns dem Standarddesign für die Steuerelemente.

Layout

Kombinationsfelder und Dropdowns sollten so angepasst werden, dass sie an den Inhalt angepasst werden, nicht an die Breite des Fensters, in dem sie angezeigt werden, oder beliebig mit der Länge eines langen Felds übereinstimmen, z. B. einem Pfad.

Incorrect: the drop-down width is too long for the content that will be displayed.
Falsch: Die Dropdownbreite ist zu lang für den Inhalt, der angezeigt wird.

Correct: the drop-down is sized to allow for translation growth, but not unnecessarily long.
Richtig: Die Dropdownliste ist so angepasst, dass das Übersetzungswachstum möglich ist, aber nicht unnötig lang.

Kontrollkästchen

Befolgen Sie für typische Interaktionsverhalten die Windows Desktop-Richtlinien für Kontrollkästchen.

Visueller Stil

  • Erstellen Sie in Hilfsdialogfeldern das Steuerelement nicht erneut. Verwenden Sie die grundlegende formatinterne Formatvorlage für das Steuerelement.

  • In der designierten Benutzeroberfläche folgen Kontrollkästchen dem Standarddesign für die Steuerelemente.

Spezielle Interaktionen

  • Die Interaktion mit einem Kontrollkästchen darf niemals ein Dialogfeld auffüllen oder zu einem anderen Bereich navigieren.

  • Kontrollkästchen an der Basislinie der ersten Textzeile ausrichten.

    Incorrect: the check box is centered on the text.
    Falsch: Das Kontrollkästchen wird auf dem Text zentriert.

    Correct: the check box is aligned with the first line of the text.
    Richtig: Das Kontrollkästchen wird an der ersten Zeile des Texts ausgerichtet.

Optionsfelder

Befolgen Sie für ein typisches Interaktionsverhalten die Windows Desktop-Richtlinien für Optionsfelder.

Visueller Stil

Formatieren Sie in Hilfsdialogfeldern keine Optionsfelder. Verwenden Sie die grundlegende formatinterne Formatvorlage für das Steuerelement.

Spezielle Interaktionen

Es ist nicht erforderlich, einen Gruppenrahmen zum Einschließen von Radiooptionen zu verwenden, es sei denn, Sie müssen den Gruppenunterschied in einem engen Layout Standard.

Gruppenframes

Befolgen Sie für ein typisches Interaktionsverhalten die Windows-Desktoprichtlinien für Gruppenframes.

Visueller Stil

Formatieren Sie in Hilfsdialogfeldern keine Gruppenframes. Verwenden Sie die grundlegende formatinterne Formatvorlage für das Steuerelement.

Layout

  • Es ist nicht erforderlich, einen Gruppenrahmen zum Einschließen von Radiooptionen zu verwenden, es sei denn, Sie müssen den Gruppenunterschied in einem engen Layout Standard.

  • Verwenden Sie niemals einen Gruppenframe für ein einzelnes Steuerelement.

  • Es ist manchmal akzeptabel, eine horizontale Regel anstelle eines Gruppenframecontainers zu verwenden.

Textsteuerelemente

Statische Textfelder

Ein statisches Textfeld stellt schreibgeschützte Informationen dar und kann vom Benutzer nicht ausgewählt werden. Vermeiden Sie die Verwendung für text, den der Benutzer möglicherweise in die Zwischenablage kopieren möchte. Schreibgeschützter statischer Text kann jedoch geändert werden, um eine Änderung des Zustands widerzuspiegeln. Im folgenden Beispiel ändert sich der statische Text "Ausgabename" unter der Gruppe "Informationen", um alle Änderungen widerzuspiegeln, die am Textfeld "Stammnamespace" darüber vorgenommen wurden.

Es gibt zwei Möglichkeiten zum Anzeigen statischer Textinformationen.

Statischer Text kann in einem Dialogfeld ohne Eindämmung eigenständig sein, wenn kein Gruppierungskonflikt vorliegt. Entscheiden Sie, ob die zusätzlichen Zeilen eines Felds wirklich erforderlich sind. Ein Beispiel ist die Anzeige eines Verzeichnispfads unter einem Abschnitt, der von einer Gruppenzeile erstellt wurde, wie unten gezeigt:

Static text info in text controls
Statische Textinformationen in Textsteuerelementen

In einem Dialogfeld, in dem andere gruppierte Bereiche vorhanden sind und die Informationen enthalten sind, würde die Lesbarkeit hilfreich sein, und wenn ein Abschnitt ausgeblendet oder angezeigt werden kann (wie im Eigenschaftenfenster Beschreibungsbereich), oder Sie möchten mit einer ähnlichen Benutzeroberfläche konsistent sein, platzieren Sie den statischen Text in einem Feld. Bei diesem Gruppenfeld sollte es sich um eine einzelne Regel handeln und mit folgendem ButtonShadowFarbton versehen sein:

Static text in the Properties window
Statischer Text im Eigenschaftenfenster

Schreibgeschütztes Textfeld

Dadurch kann der Benutzer den Text innerhalb des Felds markieren, aber nicht bearbeiten. Diese Textfelder werden durch den üblichen 3D-Chisel mit einer ButtonShadow Füllung umrandet.

Ein Textfeld kann aktiv (bearbeitbar) werden, wenn ein Benutzer ein zugeordnetes Steuerelement ändert, z. B. das Aktivieren/Deaktivieren eines Kontrollkästchens oder das Aktivieren/Deaktivieren eines Optionsfelds. Beispielsweise wird auf der unten gezeigten Seite "Extras > Optionen " das Textfeld "Homepage " aktiviert, wenn das Kontrollkästchen "Standard verwenden" deaktiviert ist.

Read-only text box, showing inactive and active states
Schreibgeschütztes Textfeld mit inaktiven und aktiven Zuständen

Verwenden von Text in Dialogfeldern

Wichtige Richtlinien für Text in Dialogfeldern:

  • Beschriftungen für Textfelder, Listenfelder und Rahmen in nicht bearbeiteten Dialogfeldern beginnen mit einem Verb, haben nur ein Anfangsbuchstaben für das erste Wort und enden mit einem Doppelpunkt.

    Textsteuerelemente in designierten Dialogfeldern folgen den Windows-Desktop-UX-Richtlinien und nehmen keine Endpunktion mit Ausnahme von Fragezeichen in Hilfelinks.

  • Beschriftungen für Kontrollkästchen und Optionsfelder beginnen mit einem Verb, einem Anfangsbuchstaben nur für das erste Wort und haben keine endende Interpunktion.

  • Beschriftungen für Schaltflächen, Menüs, Menüelemente und Registerkarten enthalten Anfangsbuchstaben für jedes Wort (Titelbuchstaben).

  • Die Bezeichnungsterminologie sollte mit ähnlichen Bezeichnungen in anderen Dialogfeldern konsistent sein.

  • Wenn möglich, müssen Sie einen Writer/Editor schreiben oder den Text genehmigen, bevor er an den Entwickler zur Implementierung wechselt.

  • Alle Steuerelemente sollten Beschriftungen haben, mit Ausnahme besonderer Umstände, in denen tabulatorend ausreichend sind. Verwenden Sie bei Bedarf Hilfstext.

Hilfstext

In Dialogfeldern enthalten, die dem Benutzer helfen sollen, den Zweck des Dialogfelds zu verstehen oder anzugeben, welche Aktion ausgeführt werden soll. Hilfstext sollte nur bei Bedarf verwendet werden, um einfache Dialogfelder zu vermeiden. Die beiden Varianten von Hilfstext sind Dialog und Wasserzeichen.

Folgen Sie allgemeinen Speicherorten für Hilfstext und selektiv bei der Einführung neuer Bereiche. Häufige Szenarien für Hilfstext sind:

  • Hilfstext in Dialogfeldern, um zusätzliche Richtungen zur Interaktion mit einem komplexen Dialogfeld zu geben.

  • Wasserzeichentext in leeren Toolfenstern oder Dialogfeldern, um zu erläutern, warum kein Inhalt sichtbar ist.

  • Ein Beschreibungsbereich, z. B. unten im Eigenschaftenfenster.

  • Wasserzeichentext in einem leeren Editor, um zu erläutern, welche Aktion der Benutzer für die ersten Schritte ergreifen sollte.

Dialogfeld-Hilfetext

Ein Benutzeroberflächen-Designer kann helfen, zu bestimmen, wann Hilfstext geeignet ist. Der Designer kann definieren, wo Hilfstext sowie sein allgemeiner Inhalt angezeigt wird. Die Benutzerunterstützung kann den tatsächlichen Text schreiben/bearbeiten.

Wasserzeichen

Dialoge profitieren von leicht unterschiedlichen Wasserzeichenrichtlinien. Da ein Dialogfeld mit vielen UI-Elementen (Bezeichnungen, Hinweistext, Schaltflächen und anderen Containersteuerelementen mit Text) beschäftigt sein kann, besonders wenn diese in Schwarz angezeigt werden, unterscheiden sich Wasserzeichen besser in Dunkelgrau (VSColor: ButtonShadow). Normalerweise wird ein Wasserzeichen in einem Steuerelement wie einem Listenfeld mit weißem Hintergrund (VSColor: Window) angezeigt.

  • Der Text wird in Dunkelgrau angezeigt (VSColor: ButtonShadow). Wenn das Wasserzeichen jedoch auf einem mittelgrauen oder anderen Farbigen (VSColor: ButtonFace) Hintergrund angezeigt wird und es Bedenken hinsichtlich der Lesbarkeit gibt, gehen Sie mit schwarzem Text (VSColor: WindowText).

  • Wasserzeichen können zentriert oder linksbündig bündig werden. Wenden Sie standardentwurfsregeln an, wenn Sie Ausrichtungsentscheidungen treffen. Das Wasserzeichen kann nicht im Hintergrund ausgewählt werden.

Watermark text example
Beispiel für Wasserzeichentext

Kontextspezifischer (dynamischer) Text

Dynamischer Text kann auf eine von zwei Arten in einem Dialogfeld oder einer moduslosen Benutzeroberfläche verwendet werden: entweder als dynamische Bezeichnung oder als dynamischer Inhalt.

  • Dynamische Beschriftung: Eine häufige Verwendung dynamischer Text befindet sich in beschreibenden Bereichen, die weitere Informationen für das ausgewählte Element bieten, z. B. in einem Dialogfeld, das eine Liste von Elementen und Eigenschaften für diese Elemente enthält, die in einem Raster rechts angezeigt werden. Die Beschriftung für das Eigenschaftenraster kann dynamisch sein, sodass beim Auswählen eines Elements auf der linken Seite das Raster rechts Informationen für dieses bestimmte Element anzeigt.

  • Dynamischer Text: kann in Fällen nützlich sein, in denen Sie bestimmte Informationen und nicht allgemeine Informationen auf diese Weise anzeigen müssen, aber es sollte darauf geachtet werden, nicht zu verwenden.

Wenn Sie möchten, dass Benutzer die Informationen kopieren können, sollte sich dynamischer Text in einem schreibgeschützten Textfeld befindet.

Schaltflächen und Verknüpfungssteuerelemente (Links) sollten den grundlegenden Windows Desktop-Richtlinien für Links für die Verwendung, den Wortlaut, die Größenanpassung und den Abstand folgen.

Traditionell wurden Schaltflächen für Aktionen und Links für die Navigation reserviert. Schaltflächen können in allen Fällen verwendet werden, aber die Rolle von Links wurde in Visual Studio erweitert, sodass Schaltflächen und Verknüpfungen in einigen Bedingungen austauschbar sind.

Verwendung von Befehlsschaltflächen:

  • Primäre Befehle

  • Anzeigen von Fenstern, mit denen Eingaben gesammelt oder Auswahlmöglichkeiten getroffen werden, auch wenn es sich um sekundäre Befehle handelt

  • Destruktive oder unumkehrbare Aktionen

  • Schaltflächen "Engagement" innerhalb von Assistenten und Seitenflüssen

Vermeiden Sie Befehlsschaltflächen in Toolfenstern, oder wenn Sie mehr als zwei Wörter für die Bezeichnung benötigen. Links können längere Bezeichnungen aufweisen.

Gründe für die Verwendung von Links:

  • Navigation zu einem anderen Fenster, Dokument oder einer anderen Webseite

  • Situationen, in denen eine längere Beschriftung oder ein kurzer Satz erforderlich ist, um die Absicht der Aktion zu beschreiben

  • Enge Räume, in denen eine Schaltfläche die Benutzeroberfläche überwältigen würde, vorausgesetzt, dass die Aktion nicht destruktiv oder unwiderruflich ist

  • Hervorheben von sekundären Befehlen in Situationen, in denen viele Befehle vorhanden sind

Beispiele

Command links used in the InfoBar following a status message
Befehlslinks, die in der Infoleiste nach einer Statusmeldung verwendet werden

Links used in the CodeLens popup
Links im CodeLens-Popup

Links used for secondary commands where buttons would attract too much attention
Links, die für sekundäre Befehle verwendet werden, bei denen Schaltflächen zu viel Aufmerksamkeit wecken würden

Allgemeine Schaltflächen

Text

Befolgen Sie die Schreibrichtlinien in Benutzeroberflächentext und Terminologie.

Visueller Stil

Standard (ohne Abgrenzung)

Die meisten Schaltflächen in Visual Studio werden in Hilfsdialogfeldern angezeigt und sollten nicht formatiert werden. Sie sollten die Standarddarstellung von Schaltflächen widerspiegeln, wie vom Betriebssystem vorgegeben.

Themen

In einigen Fällen können Schaltflächen in der formatierten Benutzeroberfläche verwendet werden, und diese Schaltflächen müssen entsprechend formatiert werden. Informationen zu Designsteuerelementen finden Sie unter Dialoge .

Spezielle Schaltflächen

Durchsuchen... Schaltflächen

[Durchsuchen...] Schaltflächen werden in Rastern, Dialogfeldern und Toolfenstern und anderen moduslosen UI-Elementen verwendet. Sie zeigen eine Auswahl an, die den Benutzer beim Ausfüllen eines Werts in ein Steuerelement unterstützt. Es gibt zwei Varianten dieser Schaltfläche, lang und kurz.

The long [Browse...] button
Die lange [Durchsuchen...] Schaltfläche

The ellipsis-only short [...] button
Die Ellipsen-nur kurze [...] Schaltfläche

Gründe für die Verwendung der Nur-Auslassungspunkte für kurze Tasten:

  • Wenn mehr als eine lange [Durchsuchen...] -Schaltfläche in einem Dialogfeld vorhanden ist, z. B. wenn mehrere Felder das Browsen zulassen. Verwenden Sie die kurze Schaltfläche [...] , um die verwirrenden Zugriffstasten zu vermeiden, die in dieser Situation erstellt wurden (&Durchsuchen und B&rowse im selben Dialogfeld).

  • In einem engen Dialogfeld oder wenn es keinen vernünftigen Ort gibt, um die lange Taste zu platzieren.

  • Wenn die Schaltfläche in einem Rastersteuerelement angezeigt wird.

Richtlinien für die Verwendung der Schaltfläche:

  • Verwenden Sie keine Zugriffstaste. Um über die Tastatur darauf zuzugreifen, muss der Benutzer über das angrenzende Steuerelement tabstoppen. Stellen Sie sicher, dass die Aktivierreihenfolge so ist, dass jede Schaltfläche "Durchsuchen" unmittelbar nach dem Feld fällt, das ausgefüllt wird. Verwenden Sie niemals einen Unterstrich unter dem ersten Punkt.

  • Legen Sie die Microsoft Active Accessibility (MSAA) -Name-Eigenschaft auf "Durchsuchen" fest... (einschließlich der Auslassungspunkte), sodass Bildschirmsprachausgaben sie als "Durchsuchen" und nicht als "punkt-dot-dot" oder "period-period-period" lesen. Bei verwalteten Steuerelementen bedeutet dies das Festlegen der AccessibleName-Eigenschaft .

  • Verwenden Sie niemals eine Auslassungspunkte [...] -Schaltfläche für alles außer einer Suchaktion. Wenn Sie z. B. eine [Neu...] -Schaltfläche benötigen, aber nicht genügend Platz für den Text haben, muss das Dialogfeld neu gestaltet werden.

Größe und Abstand

Sizing [Browse...] buttons: standard version is 75x23 pixels, short version is 26x23 pixels
Festlegen der Größe für Schaltfläche [Durchsuchen...]

Spacing [Browse...] buttons: spacing between related control and standard Browse button 7 pixels, spacing between related control and short Browse button 5 pixels
Festlegen der Abstände für Schaltfläche [Durchsuchen...]

Grafische Schaltflächen

Einige Schaltflächen sollten immer ein grafisches Bild verwenden und niemals Text enthalten, um Platz zu sparen und Lokalisierungsprobleme zu vermeiden. Diese werden häufig in Feldauswahlen und anderen sortierbaren Listen verwendet.

Hinweis

Benutzer müssen zu diesen Schaltflächen tabstoppen (es gibt keine Zugriffstasten), daher platzieren Sie sie in einer sinnvollen Reihenfolge. Ordnen Sie die name Eigenschaft der Schaltfläche der Aktion zu, die sie ausführt, damit Bildschirmsprachausgaben die Schaltflächenaktion ordnungsgemäß interpretieren.

Funktion Schaltfläche
Hinzufügen Graphical
Remove (Entfernen) Graphical
Alle hinzufügen Graphical
Alle entfernen Graphical
Nach oben Graphical
Nach unten Graphical
Löschen Graphical
Größe und Abstand

Die Größenanpassung für grafische Schaltflächen entspricht der kurzen Version der Schaltfläche [Durchsuchen...] (26 x 23 Pixel):

Appearance of a graphical image on button, with and without transparent color showing
Darstellung eines grafischen Bilds auf einer Schaltfläche mit und ohne transparente Farbe

Links eignen sich gut für navigationsbasierte Aktionen, z. B. das Öffnen eines Hilfethemas, ein modales Dialogfeld oder einen Assistenten. Wenn ein Link für einen Befehl verwendet wird, sollte er immer eine sichtbare und spürbare Änderung der Benutzeroberfläche anzeigen. Im Allgemeinen werden Aktionen, die sich auf eine Aktion (z. B. Speichern, Abbrechen und Löschen) verpflichten, mithilfe einer Schaltfläche besser kommuniziert.

Schreibstil

Befolgen Sie die Windows Desktop-Anleitung für Benutzeroberflächentext. Verwenden Sie nicht "Weitere Informationen", "Weitere Informationen" oder "Hilfe zu diesem Thema erhalten". Ausdruckslinktext in Bezug auf die primäre Frage, die vom Hilfeinhalt beantwortet wird. Beispiel: "Gewusst wie dem Server-Explorer einen Server hinzufügen?"

Visueller Stil

  • Hyperlinks sollten immer den VSColor-Dienst verwenden. Wenn ein Link nicht korrekt formatiert ist, blinkt er rot, wenn er aktiv ist oder nach dem Besuch eine andere Farbe anzeigt.

  • Fügen Sie keine Unterstreichungen im Ruhezustand des Steuerelements ein, es sei denn, der Link ist ein Satzfragment innerhalb eines vollständigen Satzes, z. B. in einem Wasserzeichen.

  • Unterstreichungen sollten beim Daraufzeigen nicht angezeigt werden. Stattdessen ist das Feedback an den Benutzer, dass der Link aktiv ist, eine leichte Farbänderung und der entsprechende Linkcursor.

Strukturansichten

Strukturansichten bieten eine Möglichkeit, komplexe Listen in übergeordneten untergeordneten Gruppen zu organisieren. Ein Benutzer kann übergeordnete Gruppen erweitern oder reduzieren, um zugrunde liegende untergeordnete Elemente einzublenden oder auszublenden. Jedes Element in einer Strukturansicht kann ausgewählt werden, um weitere Aktionen bereitzustellen.

Visueller Stil der Strukturansicht

Expander

Strukturansichtssteuerelemente sollten dem erweiterten Design entsprechen, das von Windows und Visual Studio verwendet wird. Jeder Knoten verwendet ein Erweiterungssteuerelement, um zugrunde liegende Elemente einzublenden oder auszublenden. Die Verwendung eines Erweiterungssteuerelements bietet Konsistenz für Benutzer, die möglicherweise auf unterschiedliche Strukturansichten in Windows und Visual Studio stoßen.

Correct: proper style of tree view node using an expander control
Richtig: richtiges Format des Strukturansichtsknotens mithilfe eines Erweiterungssteuerelements

Incorrect: improper style of tree view node
Falsch: unsachgemäßer Stil des Strukturansichtsknotens

Auswahl

Wenn ein Knoten in der Strukturansicht ausgewählt wird, sollte die Hervorhebung auf die vollständige Breite des Strukturansichtssteuerelements erweitert werden. Auf diese Weise können Benutzer eindeutig erkennen, welches Element sie ausgewählt haben. Auswahlfarben sollten das aktuelle Visual Studio-Design widerspiegeln.

Correct: highlight of the selected node fits the entire width of the tree view control.
Richtig: Die Hervorhebung des ausgewählten Knotens passt zur gesamten Breite des Strukturansichtssteuerelements.

Incorrect: highlight of the selected node doesn't fit the entire width of the tree view control.
Falsch: Die Hervorhebung des ausgewählten Knotens passt nicht zur gesamten Breite des Strukturansichtssteuerelements.

Symbole

Symbole sollten nur in Strukturansichtssteuerelementen verwendet werden, wenn sie bei der visuellen Identifizierung von Unterschieden zwischen Elementen helfen. Im Allgemeinen sollten Symbole nur in heterogenen Listen verwendet werden, in denen die Symbole Informationen enthalten, um die Arten von Elementen zu unterscheiden. In einer homogenen Liste können Symbole häufig als Rauschen betrachtet werden und sollten vermieden werden. In diesem Fall kann das Gruppensymbol (übergeordnetes Element) den Typ der darin enthaltenen Elemente vermitteln. Die Ausnahme dieser Regel wäre, wenn das Symbol dynamisch ist und verwendet wird, um den Zustand anzugeben.

Bildlaufleisten

Bildlaufleisten sollten immer ausgeblendet werden, wenn der Inhalt in das Strukturansichtssteuerelement passt. Es ist akzeptabel, dass Bildlaufleisten ausgeblendet oder halbtransparent in einem bildlauffähigen Fenster angezeigt werden und angezeigt werden, wenn das Fenster, das die Strukturansicht enthält, den Fokus hat, oder wenn Sie mit der Maus auf die Strukturansicht selbst zeigen.

Both vertical and horizontal scroll bars are displayed because the contents have exceeded the limits of the tree view control.
Sowohl vertikale als auch horizontale Bildlaufleisten werden angezeigt, da der Inhalt die Grenzen des Strukturansichtssteuerelements überschritten hat.

Interaktionen in der Strukturansicht

Kontextmenüs

Ein Strukturansichtsknoten kann Untermenüoptionen in einem Kontextmenü anzeigen. In der Regel tritt dies auf, wenn ein Benutzer mit der rechten Maustaste auf ein Element geklickt oder die Menütaste auf einer Windows-Tastatur gedrückt hat, wobei das Element ausgewählt ist. Es ist wichtig, dass der Knoten den Fokus erhält und ausgewählt ist. Auf diese Weise kann der Benutzer ermitteln, zu welchem Element das Untermenü gehört.

The item that has generate the context menu gains focus to notify the user which item has been selected.
Das Element, das das Kontextmenü generiert hat, erhält den Fokus, um den Benutzer darüber zu informieren, welches Element ausgewählt wurde.

Tastatur

Die Strukturansicht sollte die Möglichkeit bieten, Elemente auszuwählen und Knoten mithilfe der Tastatur zu erweitern/reduzieren. Dadurch wird sichergestellt, dass die Navigation unsere Anforderungen an die Barrierefreiheit erfüllt.

Strukturansicht-Steuerelement

Visual Studio-Struktursteuerelemente sollten der allgemeinen Tastaturnavigation folgen:

  • NACH-OBEN-TASTE: Elemente auswählen, indem Sie die Struktur nach oben bewegen

  • NACH-UNTEN- und NACH-UNTEN-TASTE: Elemente auswählen, indem Sie die Struktur nach unten bewegen

  • Pfeil nach rechts: Erweitern eines Knotens in der Struktur

  • NACH-LINKS-TASTE: Reduzieren eines Knotens in der Struktur

  • Eingabetaste: Initiieren, Laden, Ausführen des ausgewählten Elements

Trid (Strukturansicht und Rasteransicht)

Ein tridiertes Steuerelement ist ein komplexes Steuerelement, das eine Strukturansicht innerhalb eines Rasters enthält. Wenn Sie die Struktur erweitern, reduzieren und navigieren, sollten die gleichen Tastaturbefehle wie eine Strukturansicht mit den folgenden Ergänzungen beachten:

  • Pfeil nach rechts: Knoten erweitern. Nachdem der Knoten erweitert wurde, sollte er weiterhin zur nächsten Spalte auf der rechten Seite navigieren. Die Navigation sollte am Ende der Zeile beendet werden.

  • Tab: Navigiert zur nächsten Zelle auf der rechten Seite. Am Ende der Zeile wird die Navigation mit der nächsten Zeile fortgesetzt.

  • UMSCHALT+TAB: Navigiert zur nächsten Zelle auf der linken Seite. Am Anfang der Zeile wird die Navigation mit der zelle ganz rechts in der vorherigen Zeile fortgesetzt.

A trid control in Visual Studio
Ein tridiertes Steuerelement in Visual Studio