MenuFlyout Classe

Definizione

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

Ereditarietà

Object IInspectable DependencyObject FlyoutBase MenuFlyout

Derivato

Microsoft.UI.Xaml.Controls.MenuBarItemFlyout

Attributi

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Esempio

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Ottenere l'app dal Microsoft Store o ottenere il codice sorgente in GitHub.

In questo esempio viene creata una classe MenuFlyout e viene utilizzata la proprietà ContextFlyout , una proprietà disponibile per la maggior parte dei controlli, per visualizzare la classe MenuFlyout come menu di scelta rapida.

<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'esempio seguente è quasi identico, ma invece di usare la proprietà ContextFlyout per visualizzare la classe MenuFlyout come menu di scelta rapida, nell'esempio viene utilizzata la proprietà FlyoutBase.ShowAttachedFlyout per visualizzarla come 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;
    }
}

Questo esempio mostra come aggiungere e rimuovere voci di menu in fase di esecuzione in base alla modifica delle condizioni nell'app.

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

Commenti

MenuFlyout visualizza temporaneamente un elenco di comandi o opzioni correlati a ciò che l'utente sta attualmente eseguendo.

Usa un controllo Riquadro a comparsa per visualizzare singole voci e un controllo MenuFlyout per visualizzare un menu di voci. Per altre info, vedi Menu e menu di scelta rapida.

Un controllo MenuFlyout può essere utilizzato come valore della proprietà Button.Flyout . Questa impostazione viene in genere impostata in XAML come parte di una definizione dell'interfaccia utente della pagina. Button è l'unico controllo con una proprietà Flyout dedicata. Se impostato su Button.Flyout, MenuFlyout viene visualizzato quando il pulsante viene toccato o richiamato in altro modo.

Per associare menu MenuFlyout ad altri controlli come menu di contenuto, usare la proprietà ContextFlyout disponibile in qualsiasi UIElement.

È possibile utilizzare la proprietà associata FlyoutBase.AttachedFlyout per associare menuFlyout ad altri controlli come menu normale. Quando un oggetto MenuFlyout viene assegnato ad altri elementi dell'interfaccia utente tramite FlyoutBase.AttachedFlyout, è necessario chiamare il metodo ShowAt o il metodo Statico ShowAttachedFlyout per visualizzare il riquadro a comparsa.

Stile e modello di controllo

È possibile modificare lo stile predefinito e controlTemplate per assegnare al controllo un aspetto univoco. Per informazioni sulla modifica dello stile e del modello di un controllo, vedi Stili XAML. Lo stile predefinito, il modello e le risorse che definiscono l'aspetto del controllo vengono inclusi nel generic.xaml file. Ai fini della progettazione, generic.xaml viene installato con il pacchetto NuGet SDK per app di Windows. Per impostazione predefinita, il percorso è \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml. Gli stili e le risorse di versioni diverse dell'SDK potrebbero avere valori diversi.

XAML include anche risorse che è possibile usare per modificare i colori di un controllo in stati di visualizzazione diversi senza modificare il modello di controllo. La modifica di queste risorse è preferibile per impostare proprietà come Background e Foreground. Per altre info, vedi la sezione Stili leggeri dell'articolo Stili XAML .

Vedi anche

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• Panoramica dei menu e dei menu di scelta rapida
• Panoramica delle proprietà associate
• Esempio di menu di scelta rapida (Windows 10)
• Esempio di comando
• Esempio di menu Context (XAML)