MenuFlyout Klasse

Definition

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Items")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class MenuFlyout : FlyoutBase

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Items")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class MenuFlyout : FlyoutBase

Public Class MenuFlyout
Inherits FlyoutBase

<MenuFlyout>
  oneOrMoreItems
</MenuFlyout>

Vererbung

Object IInspectable DependencyObject FlyoutBase MenuFlyout

Abgeleitet

Microsoft.UI.Xaml.Controls.MenuBarItemFlyout

Attribute

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Beispiele

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Holen Sie sich die App aus dem Microsoft Store oder holen Sie sich den Quellcode auf GitHub.

In diesem Beispiel wird eine MenuFlyout-Klasse erstellt und die ContextFlyout-Eigenschaft verwendet, eine Eigenschaft, die für die meisten Steuerelemente verfügbar ist, um die MenuFlyout-Klasse als Kontextmenü anzuzeigen.

<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 anstatt die ContextFlyout-Eigenschaft zum Anzeigen der MenuFlyout-Klasse als Kontextmenü zu verwenden, verwendet das Beispiel die FlyoutBase.ShowAttachedFlyout-Eigenschaft , um sie 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;
    }
}

In diesem Beispiel wird gezeigt, wie Sie Menüelemente zur Laufzeit basierend auf sich ändernden Bedingungen in Ihrer App hinzufügen und entfernen können.

<StackPanel Margin="40" Width="220">
    <Rectangle x:Name="Rect1" Height="100" Width="200" 
               Stroke="Black" StrokeThickness="1" Fill="White">
        <Rectangle.ContextFlyout>
            <MenuFlyout x:Name="RectangleColorMenu"/>
        </Rectangle.ContextFlyout>
    </Rectangle>

    <StackPanel>
        <TextBlock TextWrapping="WrapWholeWords"
                   Text="Check colors to include in the menu, then choose a color from the context menu on the rectangle."/>
        <CheckBox Content="Blue" Click="CheckBox_Click" Tag="blue"/>
        <CheckBox Content="Green" Click="CheckBox_Click" Tag="green"/>
        <CheckBox Content="Red" Click="CheckBox_Click" Tag="red"/>
        <CheckBox Content="Yellow" Click="CheckBox_Click" Tag="yellow"/>
    </StackPanel>
</StackPanel>

private void CheckBox_Click(object sender, RoutedEventArgs e)
{
    // Using the Tag property lets you localize the display name
    // without affecting functionality.
    var cb = (CheckBox)sender;
    if (cb.IsChecked == true)
    {
        AddMenuItem(cb.Tag.ToString(), cb.Content.ToString());
    }
    else
    {
        RemoveMenuItem(cb.Content.ToString());
    }
}

private void AddMenuItem(string colorString, string locColorName)
{
    // Set the color.
    Color newColor = Colors.Blue;
    if (colorString == "green")
        newColor = Colors.Green;
    else if (colorString == "red")
        newColor = Colors.Red;
    else if (colorString == "yellow")
        newColor = Colors.Yellow;

    // Create the menu item.
    var newMenuItem = new MenuFlyoutItem();
    newMenuItem.Text = locColorName;
    newMenuItem.Click += (s, e1) =>
    {
        Rect1.Fill = new SolidColorBrush(newColor);
    };

    // Add the item to the menu.
    RectangleColorMenu.Items.Add(newMenuItem);

    // Sort the menu so it's always consistent.
    var orderedItems =  RectangleColorMenu.Items.OrderBy(i => ((MenuFlyoutItem)i).Text).ToList();
    RectangleColorMenu.Items.Clear();
    foreach (var item in orderedItems)
    {
        RectangleColorMenu.Items.Add(item);
    }
}

private void RemoveMenuItem(string locColorName)
{
    // Get any menu items to remove and remove them.
    var items = RectangleColorMenu.Items.Where(i => ((MenuFlyoutItem)i).Text == locColorName);
    foreach (MenuFlyoutItem item in items)
    {
        RectangleColorMenu.Items.Remove(item);
    }
}

Hinweise

MenuFlyout zeigt vorübergehend eine Liste von Befehlen oder Optionen an, die sich auf die aktuelle Aktion des Benutzers beziehen.

Verwenden Sie ein Flyout-Steuerelement , um einzelne Elemente und ein MenuFlyout-Steuerelement anzuzeigen, um ein Menü mit Elementen anzuzeigen. Weitere Informationen finden Sie unter Menüs und Kontextmenüs.

Ein MenuFlyout-Steuerelement kann als Wert der Button.Flyout-Eigenschaft verwendet werden. Dies wird in der Regel als Teil einer UI-Definition der Seite in XAML festgelegt. Schaltfläche ist das einzige Steuerelement, das über eine dedizierte Flyout-Eigenschaft verfügt. Bei Festlegung als Button.Flyout wird das MenuFlyout angezeigt, wenn auf die Schaltfläche getippt oder anderweitig aufgerufen wird.

Wenn Sie ein MenuFlyout anderen Steuerelementen als Inhaltsmenü zuordnen möchten, verwenden Sie die ContextFlyout-Eigenschaft , die für jedes UIElement verfügbar ist.

Sie können die angefügte FlyoutBase.AttachedFlyout-Eigenschaft verwenden, um ein MenuFlyout anderen Steuerelementen als normales Menü zuzuordnen. Wenn ein MenuFlyout anderen UI-Elementen mithilfe von FlyoutBase.AttachedFlyout zugewiesen wird, müssen Sie entweder die ShowAt-Methode oder die statische ShowAttachedFlyout-Methode aufrufen, um das Flyout anzuzeigen.

Steuerelementstil und -vorlage

Sie können die Standardformatvorlage und ControlTemplate ändern, um dem Steuerelement eine eindeutige Darstellung zu verleihen. Informationen zum Ändern des Stils und der Vorlage eines Steuerelements finden Sie unter XAML-Formatvorlagen. Die Standardformatvorlage, Vorlage und Ressourcen, die das Aussehen des Steuerelements definieren, sind in der generic.xaml Datei enthalten. Für Entwurfszwecke wird generic.xaml mit dem Windows App SDK NuGet-Paket installiert. Standardmäßig ist der Speicherort \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml. Stile und Ressourcen aus verschiedenen Versionen des SDK können unterschiedliche Werte aufweisen.

XAML enthält auch Ressourcen, mit denen Sie die Farben eines Steuerelements in verschiedenen visuellen Zuständen ändern können, ohne die Steuerelementvorlage zu ändern. Das Ändern dieser Ressourcen wird bevorzugt, um Eigenschaften wie Hintergrund und Vordergrund festzulegen. Weitere Informationen finden Sie im Abschnitt "Leichtgewichtige Formatierung" im Artikel zu XAML-Formatvorlagen .

Weitere Informationen

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• Übersicht über Menüs und Kontextmenüs
• Übersicht über angefügte Eigenschaften
• Kontextmenübeispiel (Windows 10)
• Befehlsbeispiel
• Beispiel für Context-Menü (XAML)