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 WinUI 3 Gallery include esempi interattivi della maggior parte dei controlli, delle funzionalità e delle funzionalità winUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Questo esempio crea una classe MenuFlyout e usa la proprietà ContextFlyout, una proprietà disponibile per la maggior parte dei controlli, per mostrare la classe MenuFlyout come un 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 successivo è quasi identico, ma invece di usare la proprietà ContextFlyout per mostrare la classe MenuFlyout come menu di scelta rapida, l'esempio usa la proprietà FlyoutBase.ShowAttachedFlyout per mostrare un 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;
    }
}

In questo esempio viene illustrato 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 correlate a ciò che l'utente sta attualmente eseguendo.

Usare un controllo Riquadro a comparsa per visualizzare singole voci e un controllo MenuFlyout per visualizzare un menu di voci. Per altre informazioni, vedere Menu e menu di scelta rapida.

Un controllo MenuFlyout può essere usato come valore della proprietà Button.Flyout . Questo valore viene in genere impostato in XAML come parte di una definizione dell'interfaccia utente della pagina. Button è l'unico controllo con una proprietà Flyout dedicata. Se impostato come Button.Flyout, menuFlyout viene visualizzato quando il pulsante viene toccato o richiamato in caso contrario.

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

È possibile usare la proprietà associata FlyoutBase.AttachedFlyout per associare un MenuFlyout ad altri controlli come menu normale. Quando un menuFlyout viene assegnato ad altri elementi dell'interfaccia utente usando FlyoutBase.AttachedFlyout, è necessario chiamare il metodo ShowAt o il metodo ShowAttachedFlyout statico 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, vedere Stili XAML. Lo stile predefinito, il modello e le risorse che definiscono l'aspetto del controllo sono inclusi nel generic.xaml file. A scopo di 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 provenienti da versioni diverse dell'SDK potrebbero avere valori diversi.

XAML include anche risorse che è possibile usare per modificare i colori di un controllo in diversi stati visivi senza modificare il modello di controllo. La modifica di queste risorse è preferibile impostare le proprietà, ad esempio Background e Foreground. Per altre informazioni, vedere la sezione Stile a peso leggero dell'articolo stili XAML .

Costruttori

Proprietà

Metodi

Eventi

Si applica a

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 esecuzione di comandi
• Esempio di menu di scelta rapida (XAML)