MenuFlyout クラス

定義

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

継承

Object IInspectable DependencyObject FlyoutBase MenuFlyout

派生

Microsoft.UI.Xaml.Controls.MenuBarItemFlyout

属性

ContentPropertyAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを取得します。

この例では、 MenuFlyout クラスを 作成し、ほとんどのコントロールで使用できる プロパティである ContextFlyout プロパティを使用して、 MenuFlyout クラスを コンテキスト メニューとして表示します。

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

次の例はほぼ同じですが、 ContextFlyout プロパティを使用して MenuFlyout クラスを コンテキスト メニューとして表示する代わりに、 FlyoutBase.ShowAttachedFlyout プロパティを使用してメニューとして表示します。

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

この例では、アプリの条件の変化に基づいて、実行時にメニュー項目を追加および削除する方法を示します。

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

注釈

MenuFlyout は、ユーザーが現在行っていることに関連するコマンドまたはオプションの一覧を一時的に表示します。

ポップアップ コントロールを使用して 1 つの項目を表示し、MenuFlyout コントロールを使用して項目のメニューを表示します。 詳細については、「 メニューとコンテキスト メニュー」を参照してください。

MenuFlyout コントロールは、 Button.Flyout プロパティの値として使用できます。 これは通常、ページの UI 定義の一部として XAML で設定されます。 ボタン は、専用の Flyout プロパティを持つ唯一のコントロールです。 Button.Flyout に設定すると、ボタンがタップされたとき、またはその他の方法で呼び出されたときに MenuFlyout が表示されます。

MenuFlyout をコンテンツ メニューとして他のコントロールに関連付けるには、任意の UIElement で使用できる ContextFlyout プロパティを 使用します。

FlyoutBase.AttachedFlyout 添付プロパティを使用すると、MenuFlyout を他のコントロールに標準メニューとして関連付けることができます。 FlyoutBase.AttachedFlyout を使用して MenuFlyout が他の UI 要素に割り当てられている場合は、ShowAt メソッドまたは静的 ShowAttachedFlyout メソッドを呼び出してポップアップを表示する必要があります。

コントロール のスタイルとテンプレート

既定の スタイル と ControlTemplate を変更して、コントロールに一意の外観を与えることができます。 コントロールのスタイルとテンプレートの変更については、「 XAML スタイル」を参照してください。 コントロールの外観を定義する既定のスタイル、テンプレート、およびリソースは、 generic.xaml ファイルに含まれます。 設計上、generic.xaml は、Windows アプリ SDK NuGet パッケージと共にインストールされます。 既定では、この場所は \Users\<username>\.nuget\packages\microsoft.windowsappsdk\<version>\lib\uap10.0\Microsoft.UI\Themes\generic.xaml です。 SDK のバージョンによってスタイルとリソースの値が異なる場合があります。

XAML には、コントロール テンプレートを変更せずに、さまざまな表示状態のコントロールの色を変更するために使用できるリソースも含まれています。 これらのリソースの変更は、 Background や Foreground などのプロパティを設定する場合に推奨されます。 詳細については、XAML スタイルに関する記事の軽量スタイルのセクションを参照してください。

こちらもご覧ください

• MenuFlyoutPresenter
• FlyoutBase
• Flyout
• Flyout
• メニューとコンテキスト メニューの概要
• 添付プロパティの概要
• コンテキスト メニューのサンプル (Windows 10)
• コマンドのサンプル
• Context メニュー (XAML) サンプル