Menü-Flyout und Menüleiste
Menüflyouts werden in Menü- und Kontextmenüszenarien verwendet, um eine Liste von Befehlen oder Optionen anzuzeigen, wenn der Benutzer dies anfordert. Ein Menüflyout zeigt ein einzelnes Inlinemenü der obersten Ebene an, das Menüelemente und Untermenüs enthalten kann. Um mehrere Menüs der obersten Ebene in einer horizontalen Zeile anzuzeigen, verwenden Sie die Menüleiste (die Sie normalerweise am oberen Rand des App-Fensters positionieren).
Ist dies das richtige Steuerelement?
Unter Menüs und Kontextmenüs finden Sie Hilfe bei der Identifizierung von Menü- und Kontextmenüszenarien und Anleitungen zur Verwendung von Menüflyouts im Vergleich zu Befehlsleisten-Flyouts.
Menüflyouts können als Menüs und Kontextmenüs verwendet werden, um Befehle zu organisieren. 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, finden Sie unter Sammlungsbefehle Beispiele für das direkte Platzieren eines Befehls in seinem eigenen Element, sodass Benutzer kein Menü durchlaufen müssen, um darauf zu gelangen.
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.
MenuBar erfordert Windows 10, Version 1809 (SDK 17763) oder höher oder die Windows UI-Bibliothek.
Die MenuFlyout- und MenuBar-Steuerelemente für UWP-Apps sind teil der Windows UI Library 2. 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.
- UWP-APIs:MenuFlyout-Klasse, MenuBar-Klasse, ContextFlyout-Eigenschaft, FlyoutBase.AttachedFlyout-Eigenschaft
- WinUI 2-Apis:MenuBar-Klasse, ContextFlyout-Eigenschaft, FlyoutBase.AttachedFlyout-Eigenschaft
- Öffnen Sie die WinUI 2-Katalog-App, und sehen Sie sich Menüleiste in Aktion an. Die App WinUI 2-Katalog umfasst interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.
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 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:MenuFlyout />
<muxc:MenuBar />
Erstellen eines Menüflyouts
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.
Zum Erstellen eines Menüflyouts verwenden Sie die MenuFlyout-Klasse. Sie definieren den Inhalt des Menüs, indem Sie dem MenuFlyout MenuFlyoutItem-, MenuFlyoutSubItem-, ToggleMenuFlyoutItem-, RadioMenuFlyoutItem and MenuFlyoutSeparator-Objekte hinzufügen.
Diese Objekte erfüllen folgende Zwecke:
- MenuFlyoutItem: Ausführen einer sofortigen Aktion
- MenuFlyoutSubItem – Aufnehmen einer hierarchischen Liste von Menüelementen.
- ToggleMenuFlyoutItem: Ein- und Ausschalten einer Option
- RadioMenuFlyoutItem – Wechseln zwischen sich gegenseitig ausschließenden Menüelementen.
- MenuFlyoutSeparator—Optisches Trennen von Menüelementen
In diesem Beispiel wird ein MenuFlyout erstellt, und anschließend wird mit der ContextFlyout-Eigenschaft, die für die meisten Steuerelemente verfügbar ist, das MenuFlyout als Kontextmenü angezeigt.
<Rectangle
Height="100" Width="100">
<Rectangle.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
</MenuFlyout>
</Rectangle.ContextFlyout>
<Rectangle.Fill>
<SolidColorBrush x:Name="rectangleFill" Color="Red" />
</Rectangle.Fill>
</Rectangle>
private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
// Change the color from red to blue or blue to red.
if (rectangleFill.Color == Windows.UI.Colors.Red)
{
rectangleFill.Color = Windows.UI.Colors.Blue;
}
else
{
rectangleFill.Color = Windows.UI.Colors.Red;
}
}
Das nächste Beispiel ist nahezu identisch, aber anstelle der ContextFlyout-Eigenschaft zur Anzeige der MenuFlyout-Klasse als Kontextmenü wird die FlyoutBase.ShowAttachedFlyout-Eigenschaft verwendet, um die Klasse als Menü anzuzeigen.
<Rectangle
Height="100" Width="100"
Tapped="Rectangle_Tapped">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<Rectangle.Fill>
<SolidColorBrush x:Name="rectangleFill" Color="Red" />
</Rectangle.Fill>
</Rectangle>
private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}
private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
// Change the color from red to blue or blue to red.
if (rectangleFill.Color == Windows.UI.Colors.Red)
{
rectangleFill.Color = Windows.UI.Colors.Blue;
}
else
{
rectangleFill.Color = Windows.UI.Colors.Red;
}
}
Symbole
Erwägen Sie in folgenden Fällen Symbole für die Menüpunkte einzurichten:
- Am häufigsten verwendete Elemente.
- Menüpunkte, für die allgemein bekannte oder Standardsymbole vorhanden sind.
- Menüpunkte, deren Funktion auf einfache Weise mit einem Symbol veranschaulicht werden kann.
Fühlen Sie sich nicht dazu verpflichtet, Befehle mit einem Symbol zu versehen, für die keine Standardsymbole vorhanden sind. Kryptische Symbole sind nicht hilfreich, machen das Menü unübersichtlich und hindern Benutzer daran, wichtige Menüpunkte einfach aufzufinden.
<MenuFlyout>
<MenuFlyoutItem Text="Share" >
<MenuFlyoutItem.Icon>
<FontIcon Glyph="" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem Text="Copy" Icon="Copy" />
<MenuFlyoutItem Text="Delete" Icon="Delete" />
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Rename" />
<MenuFlyoutItem Text="Select" />
</MenuFlyout>
Tipp
Die Größe der Symbole in einem MenuFlyoutItem ist 16 x 16 px. Wenn Sie SymbolIcon, FontIcon oder PathIcon verwenden, wird das Symbol automatisch verlustfrei auf die richtige Größe skaliert. Achten Sie bei der Verwendung von BitmapIcon darauf, dass Ihr Element 16 x 16 px groß sein muss.
Einfaches Ausblenden
Einfach ausblendbare Steuerelemente wie Menüs, Kontextmenüs und andere Flyouts erhalten in der vorübergehenden Benutzeroberfläche den Tastatur- bzw. Gamepad-Fokus, bis sie nicht mehr angezeigt werden. Um dieses Verhalten optisch zu kennzeichnen, werden diese Steuerelemente auf der Xbox als Überlagerung gezeichnet, wobei Helligkeit bzw. Sichtbarkeit der umgebenden Benutzeroberfläche reduziert wird. Dieses Verhalten kann mit der LightDismissOverlayMode-Eigenschaft geändert werden. Standardmäßig erhalten kurzlebige Benutzeroberflächen auf der Xbox (Auto), jedoch nicht auf anderen Gerätefamilien eine einfach ausgeblendete Überlagerung. Apps können jedoch durchsetzen, dass die Überlagerung stets On oder stets Off ist.
<MenuFlyout LightDismissOverlayMode="Off" />
Erstellen einer Menüleiste
- Wichtige APIs:MenuBar-Klasse. MenuBarItem-Klasse
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.
Sie verwenden dieselben Elemente zum Erstellen von Menüs in einer Menüleiste wie im einem Menü-Flyout. Anstatt allerdings MenuFlyoutItem-Objekte in einem MenuFlyout zu gruppieren, gruppieren Sie sie in einem MenuBarItem-Element. Jedes MenuBarItem wird der MenuBar als ein Menü der obersten Ebene hinzugefügt.
Hinweis
In diesem Beispiel wird nur gezeigt, wie die Benutzeroberflächenstruktur erstellt wird, aber nicht, wie einer der Befehle implementiert wird.
<muxc:MenuBar>
<muxc:MenuBarItem Title="File">
<MenuFlyoutSubItem Text="New">
<MenuFlyoutItem Text="Plain Text Document"/>
<MenuFlyoutItem Text="Rich Text Document"/>
<MenuFlyoutItem Text="Other Formats..."/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Open..."/>
<MenuFlyoutItem Text="Save"/>
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Exit"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="Edit">
<MenuFlyoutItem Text="Undo"/>
<MenuFlyoutItem Text="Cut"/>
<MenuFlyoutItem Text="Copy"/>
<MenuFlyoutItem Text="Paste"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="View">
<MenuFlyoutItem Text="Output"/>
<MenuFlyoutSeparator/>
<muxc:RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
<muxc:RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
<MenuFlyoutSeparator/>
<muxc:RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
<muxc:RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
<muxc:RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
</muxc:MenuBarItem>
<muxc:MenuBarItem Title="Help">
<MenuFlyoutItem Text="About"/>
</muxc:MenuBarItem>
</muxc:MenuBar>
Beispielcode herunterladen
- WinUI-Katalogbeispiel : Sehen Sie alle XAML-Steuerelemente in einem interaktiven Format.
- XAML-Kontextmenübeispiel
Verwandte Artikel
Windows developer
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für