Menüs und Kontextmenüs

  • Artikel

Menüs und Kontextmenüs sind ähnlich, was ihr Erscheinungsbild und ihren Inhalt angeht. Beide zeigen eine organisierte Liste von Befehlen oder Optionen an und sparen Platz, indem sie ausgeblendet werden, bis der Benutzer sie benötigt. Es gibt jedoch Unterschiede zwischen ihnen, z. B. was Sie verwenden sollten, um sie zu erstellen, und wie ein Benutzer darauf zugreift.

Beispiel für ein typisches Kontextmenü

Ist dies das richtige Steuerelement?

Menüs und Kontextmenüs dienen zum Organisieren von Befehlen und sparen Platz, indem diese Befehle ausgeblendet werden, bis der Benutzer sie benötigt. Verwenden Sie ein Dialogfeld oder ein Flyout, um beliebige Inhalte anzuzeigen, z. B. eine Benachrichtigung oder eine Bestätigungsanforderung.

Wenn ein bestimmter Befehl häufig verwendet wird und Sie über den verfügbaren Speicherplatz verfügen, sollten Sie ihn direkt in ein eigenes Element einfügen, damit Benutzer nicht über ein Menü navigieren müssen, um zu ihm zu gelangen.

Wann sollten Sie ein Menü und wann ein Kontextmenü verwenden?

  • Ist das übergeordnete Element eine Schaltfläche oder ein anderes Befehlselement, dessen primäre Funktion es ist, weitere Befehle zu präsentieren, verwenden Sie ein Menü.
  • Wenn das übergeordnete Element eine andere Art von Element ist, das hauptsächlich einem anderen Zweck dient (z. B. der Anzeige von Text oder einem Bild), verwenden Sie ein Kontextmenü.

Wenn Sie einem Text- oder Bildelement Befehle (z. B. Ausschneiden, Kopieren und Einfügen) hinzufügen möchten, verwenden Sie anstelle eines Menüs ein Kontextmenü. In diesem Szenario besteht die primäre Rolle des Textelements darin, Text zu präsentieren und zu bearbeiten. zusätzliche Befehle (z. B. Ausschneiden, Kopieren und Einfügen) sind sekundär und gehören in ein Kontextmenü.

Beispiel für ein Kontextmenü in der Fotogalerie

Kontextmenüs

Kontextmenüs weisen die folgenden Merkmale auf:

  • Sind mit einem einzelnen Element verknüpft und zeigen Sekundärbefehle an.
  • Werden mit der rechten Maustaste (oder einer entsprechenden Aktion, z. B. durch Tippen und Halten) aufgerufen.
  • Werden Elementen über ihre ContextFlyout-Eigenschaft zugeordnet.

In Fällen, in denen Das Kontextmenü allgemeine Befehle enthält (z. B. Kopieren, Ausschneiden, Einfügen, Löschen, Freigeben oder Textauswahlbefehle), verwenden Sie das Befehlsleisten-Flyout , und gruppieren Sie diese allgemeinen Befehle als primäre Befehle, sodass sie als einzelne, horizontale Zeile im Kontextmenü angezeigt werden.

In Fällen, in denen Ihr Kontextmenü keine allgemeinen Befehle enthält, kann entweder das Befehlsleistenflyout oder das Menüflyout verwendet werden, um ein Kontextmenü anzuzeigen. Es wird empfohlen, CommandBarFlyout zu verwenden, da es mehr Funktionen als MenuFlyout bietet und, falls gewünscht, das gleiche Verhalten und Aussehen von MenuFlyout erreichen kann, indem nur sekundäre Befehle verwendet werden.

Menüs weisen die folgenden Merkmale auf:

  • Haben Sie einen einzigen Einstiegspunkt (am oberen Bildschirmrand, z. B. über ein Menü „Datei“), der immer angezeigt wird
  • Werden in der Regel an eine Schaltfläche oder ein übergeordnetes Menüelement angehängt
  • Werden mit der linken Maustaste (oder einer entsprechenden Aktion, z. B. durch Tippen) aufgerufen
  • Werden Elementen über ihre Flyout- oder FlyoutBase.AttachedFlyout-Eigenschaft zugeordnet oder in einer Menüleiste am oberen Rand des App-Fensters gruppiert.

Wenn der Benutzer ein Befehlselement (z. B. eine Schaltfläche) aufruft, dessen primäre Rolle darin besteht, zusätzliche Befehle anzuzeigen, verwenden Sie das Menüflyout , um ein einzelnes Menü der obersten Ebene zu hosten, das als Flyout angezeigt wird, das an das Benutzeroberflächenelement auf der Canvas angefügt ist. Jedes MenuFlyout kann Menüelemente und Untermenüs hosten. Verwenden Sie für Apps, die möglicherweise mehr organization oder Gruppierung benötigen, eine Menüleiste als schnelle und einfache Möglichkeit, mehrere Menüs der obersten Ebene in einer horizontalen Zeile anzuzeigen.

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.

Die Steuerelemente CommandBarFlyout und MenuBar für UWP-Apps sind als Teil der Windows-UI-Bibliothek 2 enthalten. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek). APIs für diese Steuerelemente sind sowohl in den Namespaces Windows.UI.Xaml.Controls als auch in Microsoft.UI.Xaml.Controls vorhanden.

Es wird empfohlen, die neueste WinUI 2 zu verwenden, um die neuesten Stile und Vorlagen für alle Steuerelemente abzurufen. WinUI 2.2 oder höher enthält eine neue Vorlage für diese Steuerelemente, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Zur Verwendung des Codes in diesem Artikel mit WinUI 2 stellen Sie die in Ihrem Projekt enthaltenen Windows-UI-Bibliothek-APIs mithilfe eines Alias in XAML dar (wir verwenden muxc). Weitere Informationen finden Sie unter Erste Schritte mit WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />
<muxc:MenuBar />