MenuFlyout Classe

Definição

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

Herança

Object IInspectable DependencyObject FlyoutBase MenuFlyout

Derivado

Microsoft.UI.Xaml.Controls.MenuBarItemFlyout

Atributos

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemplos

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub.

Este exemplo cria uma classe MenuFlyout e usa a propriedade ContextFlyout, uma propriedade disponível para a maioria dos controles, para mostrar a classe MenuFlyout como menu de contexto.

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

O próximo exemplo é praticamente idêntico, mas em vez de usar a propriedade ContextFlyout para mostrar a classe MenuFlyout como menu de contexto, o exemplo usa a propriedade Showattachedflyout para mostrá-la como 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;
    }
}

Este exemplo mostra como você pode adicionar e remover itens de menu em runtime com base na alteração das condições em seu aplicativo.

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

Comentários

MenuFlyout exibe temporariamente uma lista de comandos ou opções relacionadas ao que o usuário está fazendo no momento.

Use um controle Flyout para exibir itens únicos e um controle MenuFlyout para mostrar um menu de itens. Para obter mais informações, consulte Menus e menus de contexto.

Um controle MenuFlyout pode ser usado como o valor da propriedade Button.Flyout . Isso geralmente é definido em XAML como parte de uma definição de interface do usuário da página. Button é o único controle que tem uma propriedade flyout dedicada. Quando definido como Button.Flyout, o MenuFlyout é exibido quando o botão é tocado ou invocado de outra forma.

Para associar um MenuFlyout a outros controles como um menu de conteúdo, use a propriedade ContextFlyout que está disponível em qualquer UIElement.

Você pode usar a propriedade anexada FlyoutBase.AttachedFlyout para associar um MenuFlyout a outros controles como um menu regular. Quando um MenuFlyout é atribuído a outros elementos de interface do usuário usando FlyoutBase.AttachedFlyout, você deve chamar o método ShowAt ou o método ShowAttachedFlyout estático para exibir o submenu.

Estilo e modelo de controle

Você pode modificar o Estilo e ControlTemplate padrão para dar ao controle uma aparência exclusiva. Para obter informações sobre como modificar o estilo e o modelo de um controle, consulte Estilos XAML. O estilo, o modelo e os recursos padrão que definem a aparência do controle são incluídos no generic.xaml arquivo. Para fins de design, generic.xaml é instalado com o pacote NuGet SDK do Aplicativo Windows. Por padrão, esse local é \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml. Estilos e recursos de diferentes versões do SDK podem ter valores diferentes.

O XAML também inclui recursos que você pode usar para modificar as cores de um controle em diferentes estados visuais sem modificar o modelo de controle. É preferível modificar esses recursos para definir propriedades como Plano de Fundo e Primeiro Plano. Para obter mais informações, consulte a seção Estilo leve do artigo Estilos XAML .

Construtores

Propriedades

Métodos

Eventos

Aplica-se a

Confira também

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• Visão geral de menus e menus de contexto
• Visão geral das propriedades anexadas
• Exemplo de menu de contexto (Windows 10)
• Exemplo de execução de comandos
• Exemplo de XAML (menu de contexto)