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 zugehörige Steuerelement verschiebt, drückt und hält oder den Zeiger auf das zugeordnete Steuerelement bewegt. Die QuickInfo wird ausgeblendet, wenn der Benutzer den Fokus von aus verschiebt, auf nicht mehr drückt oder nicht mehr mit dem Mauszeiger auf das zugehörige Steuerelement zeigt (es sei denn, der Zeiger bewegt sich auf die QuickInfo zu).

Hinweis

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

Eine QuickInfo

Ist dies das richtige Steuerelement?

Verwenden Sie eine QuickInfo, damit der Benutzer weitere Informationen über ein Steuerelement erhält, bevor er zum Ausführen einer Aktion aufgefordert wird. QuickInfo-Steuerelemente sollten sparsam verwendet werden, vor allem nur dann, wenn sie für Benutzer, die eine bestimmte Aufgabe ausführen möchten, wirklich nützlich sind. Es gilt folgende Faustregel: Für Informationen, die bereits an einer anderen Stelle derselben Benutzeroberfläche vermittelt werden, benötigen Sie keine QuickInfo. Eine nützliche QuickInfo bietet klärende Informationen zu einer unklaren Aktion.

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

  • Sollen die Informationen beim Daraufzeigen sichtbar werden? Wenn dies nicht erwünscht ist, verwenden Sie ein anderes Steuerelement. QuickInfos sollte niemals ohne vorhergehende Aktion angezeigt werden, sondern immer als Ergebnis einer Benutzerinteraktion.

  • Ist das Steuerelement mit Text beschriftet? Wenn dies nicht der Fall ist, fügen Sie die Beschriftung als QuickInfo hinzu. Beim UX-Entwurf empfiehlt es sich, die meisten Steuerelemente inline zu beschriften, sodass QuickInfos dafür nicht erforderlich sind. Steuerelemente in Symbolleisten sowie nur Symbole zeignde Befehlsschaltflächen müssen dagegen mit QuickInfos versehen werden.

  • Wären eine Beschreibung oder zusätzliche Informationen zu einem Objekt hilfreich? Verwenden Sie in diesem Fall eine QuickInfo. Der Text ist aber nur als Ergänzung gedacht – wichtige Informationen für die Hauptaufgaben dürfen nicht nur als QuickInfo vorhanden sein. Fügen Sie wichtige Informationen direkt in die Benutzeroberfläche ein, damit Benutzer nicht erst danach suchen müssen.

  • Handelt es sich bei den ergänzenden Informationen um Fehler-, Warn- oder Statusmeldungen? Verwenden Sie in diesem Fall ein anderes Benutzeroberflächenelement, beispielsweise ein Flyout.

  • Müssen die Benutzer mit den Informationen interagieren? Verwenden Sie in diesem Fall ein anderes Steuerelement. Eine Benutzerinteraktion mit QuickInfo ist nicht möglich, da die Informationen beim Bewegen der Maus ausgeblendet werden.

  • Müssen die Benutzer die ergänzenden Informationen drucken? Verwenden Sie in diesem Fall ein anderes Steuerelement.

  • Ist anzunehmen, dass sich die Benutzer durch QuickInfo gestört oder abgelenkt fühlen? Ziehen Sie in diesem Fall eine andere Lösung in Betracht. Möglicherweise können Sie ganz auf die zusätzlichen Informationen verzichten. Wenn Sie QuickInfos verwenden, obwohl dies die Benutzer möglicherweise irritiert, geben Sie den Benutzern die Möglichkeit, die QuickInfos zu deaktivieren.

Empfehlungen

  • Verwenden Sie QuickInfos sparsam (oder gar nicht). QuickInfos stellen eine Unterbrechung dar. Eine QuickInfo kann genauso ablenkend wirken wie ein Popup. Verwenden Sie sie daher nur, wenn sie wirklich von Bedeutung sind.
  • Halten Sie den QuickInfo-Text kurz. QuickInfos eignen sich gut für kurze Sätze und Satzfragmente. Längere Textblöcke können überfrachtet wirken, sodass ein Timeout für die QuickInfo auftritt, bevor der Benutzer sie zu Ende gelesen hat.
  • Erstellen Sie hilfreiche QuickInfo-Texte mit ergänzenden Informationen. Der QuickInfo-Text muss informativ sein. Verwenden Sie keine selbstverständlichen oder bereits auf dem Bildschirm vorhandenen Informationen als QuickInfo-Text. Da der QuickInfo-Text nicht immer angezeigt wird, sollte er nur ergänzende Informationen enthalten, die nicht unbedingt gelesen werden müssen. Teilen Sie wichtige Informationen in Form von selbsterklärenden Beschriftungen für Steuerelemente oder direkt eingefügtem ergänzendem Text mit.
  • Verwenden Sie ggf. Bilder als QuickInfo. Manchmal ist ein Bild aussagekräftiger als Text. Wenn der Benutzer z. B. auf einen Hyperlink zeigt, können Sie als QuickInfo eine Vorschau der verknüpften Seite anzeigen.
  • Tastaturbeschleunigungen werden standardmäßig in QuickInfos angezeigt. Wenn Sie eine eigene QuickInfo hinzufügen, stellen Sie sicher, dass sie Informationen zu den verfügbaren Tastenkombinationen enthält.
  • Verwenden Sie die QuickInfo nicht, um bereits in der UI vorhandene Informationen anzuzeigen. Versehen Sie z. B. keine Schaltfläche mit QuickInfo-Text, der bereits auf der Schaltfläche selbst angezeigt wird.
  • Fügen Sie in QuickInfos keine interaktiven Steuerelemente ein.
  • Fügen Sie in QuickInfos keine Bilder ein, die wie interaktive Steuerelemente aussehen.

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.

Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, 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.

Erstellen einer QuickInfo

Öffnen Sie die WinUI 3-Katalog-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 verschleiert, auf den sie sich bezieht, können Sie die Platzierung mithilfe der PlacementRect-Eigenschaft präzise 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