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 gedrückt hält oder den Zeiger darüber bewegt. Die QuickInfo wird ausgeblendet, sobald der Benutzer den Fokus von dem zugehörigen Steuerelement wegbewegt, das Steuerelement nicht mehr gedrückt hält oder den Zeiger nicht mehr darüber hält (es sei denn, der Zeiger bewegt sich auf die QuickInfo zu).

Ist dies das richtige Steuerelement?

Verwenden Sie eine QuickInfo, um mehr Informationen zu einem Steuerelement bereitzustellen, bevor Sie den Benutzer auffordern, eine Aktion auszuführen. QuickInfos sollten sparsam und nur dann verwendet werden, 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 inline zu beschriften, und dafür benötigen Sie keine QuickInfo. Symbolleisten-Steuerelemente 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 handeln, 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.
• Tastaturkürzel werden standardmäßig in QuickInfos angezeigt. Wenn Sie eine eigene QuickInfo hinzufügen, stellen Sie sicher, dass sie Informationen zu den verfügbaren Tastenkürzel 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.
• Fügen Sie keine Bilder in die Quickinfo ein, die den Anschein erwecken, als seien sie interaktiv.

Erstellen eines Tooltips

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

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 ToolTipService.Placement-Eigenschaft, um die QuickInfo über, unter, links oder rechts neben dem Zeiger zu platzieren. 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 sich bezieht, können Sie ihre Position mit der PlacementRect-Eigenschaft genau festlegen. 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 Placement-Eigenschaft legt fest, ob die QuickInfo über, unter, links oder rechts von PlacementRect gezeichnet 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>

Verwandte Artikel

• QuickInfo-Klasse