Freigeben über

Quickinfos

  • Artikel

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, gedrückt hält oder den Mauszeiger über das zugeordnete Steuerelement 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.

QuickInfo

Ist dies das richtige Steuerelement?

Verwenden Sie eine QuickInfo, um weitere Informationen zu einem Steuerelement anzuzeigen, 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 Oberfläche verfügbar sind. Eine wertvolle QuickInfo verdeutlicht eine unklare Aktion.

Wann sollten Sie eine QuickInfo verwenden? Orientieren Sie sich an folgenden Fragen:

  • Sollen die Informationen beim Daraufzeigen 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 eine QuickInfo, um die Bezeichnung bereitzustellen. Es ist eine gute UX-Entwurfspraxis, die meisten Steuerelemente inline zu bezeichnen, und für diese benötigen Sie keine QuickInfos. Symbolleistensteuerelemente und Befehlsschaltflächen mit nur Symbolen benötigen QuickInfos.

  • Wären eine Beschreibung oder zusätzliche Informationen zu einem Objekt hilfreich? Verwenden Sie in diesem Falls eine QuickInfo. Aber der Text muss ergänzend sein , d. h. nicht für die wichtigsten 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 den Informationen interagieren? Wenn ja, verwenden Sie ein anderes Steuerelement. Benutzer können nicht mit Tipps interagieren, da das Verschieben der Maus sie verschwindet.

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

  • Ist anzunehmen, dass sich die Benutzer durch QuickInfo gestört oder abgelenkt fühlen? 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.

Empfehlungen

  • 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 QuickInfo-Text kurz. QuickInfos eignen sich perfekt für kurze Sätze und Satzfragmente. Große Textblöcke können überwältigend sein, und die QuickInfo kann zeitüberschreitungen, bevor der Benutzer das Lesen beendet hat.
  • Erstellen Sie hilfreichen, ergänzenden QuickInfo-Text. QuickInfo-Text muss 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 selbsterklärenden Steuerelementbeschriftungen oder direktem ergänzendem Text.
  • Verwenden Sie bei Bedarf Bilder. Manchmal ist es besser, ein Bild in einer QuickInfo zu verwenden. Wenn der Benutzer beispielsweise auf einen Link zeigt, können Sie eine QuickInfo verwenden, um eine Vorschau der verknüpften Seite anzuzeigen.
  • Zugriffstasten werden standardmäßig in QuickInfos angezeigt. Wenn Sie Eine eigene QuickInfo hinzufügen, stellen Sie sicher, dass sie Informationen zu den verfügbaren Zugriffstasten enthält.
  • Verwenden Sie keine QuickInfo, um bereits in der Benutzeroberfläche sichtbaren Text anzuzeigen. Platzieren Sie beispielsweise keine QuickInfo auf einer Schaltfläche, die denselben Text der Schaltfläche anzeigt.
  • Platzieren Sie keine interaktiven Steuerelemente in der QuickInfo.
  • Platzieren Sie keine Bilder, die so aussehen, als seien sie interaktiv in der QuickInfo.

UWP und WinUI 2

Wichtig

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 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente. 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.

Erstellen einer QuickInfo

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

Die WinUI 3-Katalog-App umfasst 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);

Inhalt

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

<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 eine Platzierung oben oder unten, HorizontalOffset, wenn eine Platzierung links oder rechts erfolgt.

<!-- 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 er verweist, können Sie die Platzierung genau mithilfe der PlacementRect-Eigenschaft anpassen. PlacementRect verankert die Position der QuickInfo und bildet außerdem einen Bereich, der von der QuickInfo nicht verdeckt wird, sofern der Platz auf dem Bildschirm ausreicht, um die QuickInfo außerhalb dieses Bereichs zu zeichnen. 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>

Beispielcode herunterladen