MenuFlyout Classe

Définition

/// [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>

Héritage

Object IInspectable DependencyObject FlyoutBase MenuFlyout

Dérivé

Microsoft.UI.Xaml.Controls.MenuBarItemFlyout

Attributs

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemples

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenez l’application à partir du Microsoft Store ou obtenez le code source sur GitHub.

Cet exemple crée une classe MenuFlyout et utilise la propriété ContextFlyout , une propriété disponible pour la plupart des contrôles, pour afficher la classe MenuFlyout en tant que menu contextuel.

<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;
    }
}

L’exemple suivant est presque identique, mais au lieu d’utiliser la propriété ContextFlyout pour afficher la classe MenuFlyout en tant que menu contextuel, l’exemple utilise la propriété FlyoutBase.ShowAttachedFlyout pour l’afficher en tant que menu.

<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;
    }
}

Cet exemple montre comment ajouter et supprimer des éléments de menu au moment de l’exécution en fonction de la modification des conditions dans votre application.

<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);
    }
}

Remarques

MenuFlyout affiche temporairement une liste de commandes ou d’options liées à ce que l’utilisateur fait actuellement.

Utilisez un contrôle Volant pour afficher des éléments uniques et un contrôle MenuFlyout pour afficher un menu d’éléments. Pour plus d’informations, consultez Menus et menus contextuels.

Un contrôle MenuFlyout peut être utilisé comme valeur de la propriété Button.Flyout . Cela est généralement défini en XAML dans le cadre d’une définition d’interface utilisateur de la page. Button est le seul contrôle qui a une propriété flyout dédiée. Lorsque la valeur est Button.Flyout, menuFlyout s’affiche lorsque le bouton est appuyé ou appelé.

Pour associer un MenuFlyout à d’autres contrôles en tant que menu de contenu, utilisez la propriété ContextFlyout disponible sur n’importe quel uiElement.

Vous pouvez utiliser la propriété jointe FlyoutBase.AttachedFlyout pour associer un MenuFlyout à d’autres contrôles en tant que menu normal. Lorsqu’un MenuFlyout est affecté à d’autres éléments d’interface utilisateur à l’aide de FlyoutBase.AttachedFlyout, vous devez appeler la méthode ShowAt ou la méthode Statique ShowAttachedFlyout pour afficher le menu volant.

Style de contrôle et modèle

Vous pouvez modifier le style par défaut et ControlTemplate pour donner au contrôle une apparence unique. Pour plus d’informations sur la modification du style et du modèle d’un contrôle, consultez les styles XAML. Le style, le modèle et les ressources par défaut qui définissent l’apparence du contrôle sont inclus dans le generic.xaml fichier. À des fins de conception, generic.xaml est installé avec le package NuGet SDK d'application Windows. Par défaut, l'emplacement est \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml. Les styles et ressources de différentes versions du Kit de développement logiciel (SDK) peuvent avoir des valeurs différentes.

XAML inclut également des ressources que vous pouvez utiliser pour modifier les couleurs d’un contrôle dans différents états visuels sans modifier le modèle de contrôle. La modification de ces ressources est recommandée pour définir des propriétés telles que l’arrière-plan et le premier plan. Pour plus d’informations, consultez la section style léger de l’article styles XAML .

Voir aussi

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• Vue d’ensemble des menus et des menus contextuels
• Vue d’ensemble des propriétés jointes
• Exemple de menu contextuel (Windows 10)
• Exemple de commande
• exemple de menu Context (XAML)