Freigeben über

QuickInfos

Eine QuickInfo ist ein Popup, das zusätzliche Informationen zu einem anderen Steuerelement oder Objekt enthält. QuickInfos werden automatisch angezeigt, wenn der Benutzer den Fokus auf das zugeordnete Steuerelement verschiebt, es drückt und hält oder den Mauszeiger darüber bewegt. Die QuickInfo wird ausgeblendet, wenn der Benutzer den Fokus bewegt, nicht mehr gedrückt hält oder den Mauszeiger über das zugeordnete Steuerelement zeigt (es sei denn, der Zeiger bewegt sich in Richtung QuickInfo).

Hinweis

Ab Windows 11, Version 21H2, kann eine QuickInfo auch durch Drücken der STRG-TASTE geschlossen werden.

Tooltip

Ist dies das richtige Steuerelement?

Verwenden Sie ein Tooltip, um mehr Informationen über ein Bedienelement bereitzustellen, bevor Sie den Benutzer auffordern, eine Aktion auszuführen. QuickInfos sollten sparsam verwendet werden, und nur dann, wenn sie einen eindeutigen Wert für den Benutzer hinzufügen, der versucht, eine Aufgabe auszuführen. Eine Faustregel besteht darin, dass Sie keine QuickInfo benötigen, wenn die Informationen an anderer Stelle in derselben Erfahrung verfügbar sind. Eine wertvolle QuickInfo verdeutlicht eine unklare Aktion.

Wann sollten Sie einen Tooltip verwenden? Um eine Entscheidung zu treffen, ziehen Sie folgende Fragen in Betracht:

  • Sollen die Informationen durch Zeigen mit dem Zeiger sichtbar werden? Wenn nicht, verwenden Sie ein anderes Steuerelement. Zeigen Sie Tipps nur als Ergebnis der Benutzerinteraktion an, und zeigen Sie sie niemals allein an.

  • Ist das Steuerelement mit Text beschriftet? Wenn nicht, verwenden Sie einen Tooltip, um die Bezeichnung anzuzeigen. Es ist eine gute UX-Designpraxis, die meisten Steuerelemente in der Zeile zu bezeichnen, und dafür benötigen Urheber keine Tooltips. Symbolleistensteuerelemente und Befehlsschaltflächen, die nur Symbole anzeigen, benötigen QuickInfos.

  • Wären eine Beschreibung oder zusätzliche Informationen zu einem Objekt hilfreich? Verwenden Sie in diesem Fall eine QuickInfo. Aber der Text muss ergänzend sein, d. h. nicht wesentlich für die primären Aufgaben. Wenn es wichtig ist, platzieren Sie sie direkt auf der Benutzeroberfläche, damit Benutzer sie nicht entdecken oder suchen müssen.

  • Handelt es sich bei den ergänzenden Informationen um Fehler-, Warn- oder Statusmeldungen? Wenn ja, verwenden Sie ein anderes UI-Element, z. B. ein Flyout.

  • Müssen die Benutzer mit dem Tipp interagieren? Wenn ja, verwenden Sie ein anderes Steuerelement. Benutzer können nicht mit Tipps interagieren, da das Verschieben der Maus sie verschwinden lässt.

  • Müssen die Benutzer die ergänzenden Informationen drucken? Wenn ja, verwenden Sie ein anderes Steuerelement.

  • Werden Benutzer die Tipps als störend oder ablenkend empfinden? Wenn ja, erwägen Sie, eine andere Lösung zu verwenden – auch überhaupt nichts zu tun. Wenn Sie Tipps verwenden, in denen sie möglicherweise ablenken, können Benutzer sie deaktivieren.

Recommendations

  • Verwenden Sie QuickInfos sparsam (oder gar nicht). QuickInfos sind eine Unterbrechung. Eine QuickInfo kann so ablenkend sein wie ein Popup, verwenden Sie sie also nur, wenn sie einen erheblichen Wert hinzufügen.
  • Halten Sie den Tooltip-Text kurz. QuickInfos eignen sich perfekt für kurze Sätze und Satzteile. Große Textblöcke können überwältigend sein, und der Tooltip kann ablaufen, bevor der Benutzer das Lesen beendet hat.
  • Erstellen Sie einen ergänzenden und hilfreichen Tooltip-Text. Tooltip-Text sollte informativ sein. Machen Sie es nicht offensichtlich, oder wiederholen Sie einfach, was bereits auf dem Bildschirm ist. Da QuickInfo-Text nicht immer sichtbar ist, sollte es sich um ergänzende Informationen handelt, die Benutzer nicht lesen müssen. Kommunizieren Sie wichtige Informationen mithilfe von selbst-erklärenden Beschriftungen von Steuerelementen oder durch ergänzenden Text an Ort und Stelle.
  • Verwenden Sie bei Bedarf Bilder. Manchmal ist es besser, ein Bild in einer QuickInfo zu verwenden. Wenn der Benutzer beispielsweise über einen Hyperlink fährt, können Sie ein Tooltip verwenden, um eine Vorschau der verlinkten Seite anzuzeigen.
  • Tastenkombinationen werden standardmäßig in QuickInfos angezeigt. Wenn Sie eine eigene QuickInfo hinzufügen, stellen Sie sicher, dass sie Informationen zu den verfügbaren Tastenkürzeln enthält.
  • Verwenden Sie keine Tooltips, um bereits in der Benutzeroberfläche sichtbaren Text anzuzeigen. Platzieren Sie beispielsweise keine QuickInfo auf einer Schaltfläche, deren Text mit dem der Schaltfläche identisch ist.
  • Platzieren Sie keine interaktiven Steuerelemente in der QuickInfo.
  • Platzieren Sie keine Bilder, die so aussehen, als seien sie interaktiv in der QuickInfo.

Erstellen eines Tooltips

Öffnen Sie die WinUI Gallery-App, und sehen Sie sich die QuickInfo in Aktion an.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Eine QuickInfo muss einem anderen Benutzeroberflächenelement zugewiesen werden, das ihr Eigentümer ist. Die ToolTipService-Klasse bietet statische Methoden zum Anzeigen einer QuickInfo.

Verwenden Sie in XAML die angefügte ToolTipService.Tooltip-Eigenschaft, um die QuickInfo einem Eigentümer zuzuweisen.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

Verwenden Sie im Code die ToolTipService.SetToolTip-Methode, um die QuickInfo einem Eigentümer zuzuweisen.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Content

Sie können jedes beliebige Objekt als Inhalt eines Tooltips verwenden. Hier ist ein Beispiel für die Verwendung eines Bilds in einem ToolTip.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Platzierung

Standardmäßig wird eine QuickInfo über dem Zeiger zentriert angezeigt. Die Platzierung wird nicht durch das App-Fenster eingeschränkt, sodass die QuickInfo möglicherweise teilweise oder komplett außerhalb der Grenzen des App-Fensters angezeigt wird.

Verwenden Sie die Eigenschaft Placement oder die angefügte Eigenschaft ToolTipService.Placement, um zu spezifizieren, ob die QuickInfo über, unter, links oder rechts neben dem Zeiger gezeichnet werden soll. Sie können die Eigenschaften VerticalOffset und HorizontalOffset so festlegen, dass der Abstand zwischen dem Zeiger und der QuickInfo geändert wird. Nur einer der beiden Offset-Werte beeinflusst die endgültige Position: VerticalOffset, wenn die Platzierung oben ist oder unten ist, HorizontalOffset, wenn die Platzierung links ist oder rechts ist.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Wenn eine QuickInfo den Inhalt verdeckt, auf den sie verweist, können Sie die Anordnung genau mithilfe der PlacementRect-Eigenschaft anpassen. PlacementRect verankert die Position der QuickInfo und dient zudem als Bereich, den die QuickInfo nicht verdecken wird, vorausgesetzt, es steht genügend Platz auf dem Bildschirm zur Verfügung, um die QuickInfo außerhalb dieses Bereichs zu platzieren. Du kannst den Ursprung des Rechtecks in Bezug auf den Eigentümer der QuickInfo sowie Höhe und Breite des Ausschlussbereichs angeben. Die Eigenschaft Placement bestimmt, ob das Tooltip über, unter, links oder rechts vom PlacementRect angezeigt wird.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

UWP und WinUI für UWP

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI für UWP , um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

  • Last updated on