次の方法で共有


MenuFlyout クラス

定義

コマンドのメニューを表示するポップアップを表します。

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
class MenuFlyout : FlyoutBase
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Items")]
public class MenuFlyout : FlyoutBase
Public Class MenuFlyout
Inherits FlyoutBase
<MenuFlyout>
  oneOrMoreItems
</MenuFlyout>
継承
Object IInspectable DependencyObject FlyoutBase MenuFlyout
派生
属性

Windows の要件

デバイス ファミリ
Windows 10 (10.0.10240.0 で導入)
API contract
Windows.Foundation.UniversalApiContract (v1.0 で導入)

ヒント

詳細、設計ガイダンス、およびコード例については、「 メニューとコンテキスト メニュー」を参照してください。

WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、MenuFlyout の動作を確認します

この例では、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 プロパティを使って、メニューとして MenuFlyout クラスを表示します。

<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 で設定されます。 Button は、専用の Flyout プロパティを持つ唯一のコントロールです。 Button.Flyout に設定すると、ボタンがタップされたとき、または呼び出されたときに MenuFlyout が表示されます。

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

以前のバージョンの注意事項

注意

ContextFlyout プロパティは、Windows 10 Anniversary Update (SDK バージョン 14393) より前は使用できません。 以前のバージョンの場合は、 FlyoutBase.AttachedFlyout 添付プロパティを使用します。

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

上記のメンバーに加えて、一般的な MenuFlyout シナリオでよく使用される基本クラス FlyoutBase の他のメンバーがあります。

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

既定の StyleControlTemplate を変更して、コントロールに一意の外観を与えることができます。 コントロールのスタイルとテンプレートの変更の詳細については、「コントロールの スタイル設定」を参照してください。 コントロールの外観を定義する既定のスタイル、テンプレート、およびリソースがファイルに generic.xaml 含まれます。 設計上の目的で、 generic.xaml は SDK または NuGet パッケージのインストールでローカルで使用できます。

  • WinUI スタイル (推奨): WinUI から更新されたスタイルについては、「」を参照してください \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml
  • WinUI 以外のスタイル: 組み込みのスタイルについては、「」を参照してください %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml

インストールをカスタマイズした場合、場所が異なる場合があります。 SDK の異なるバージョンのスタイルとリソースの値が異なる場合があります。

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

バージョン履歴

Windows のバージョン SDK バージョン 追加された値
1809 17763 ShowAt

コンストラクター

MenuFlyout()

MenuFlyout クラスの新しいインスタンスを初期化します。

プロパティ

AllowFocusOnInteraction

ユーザーが操作するときに要素が自動的にフォーカスを取得するかどうかを示す値を取得または設定します。

(継承元 FlyoutBase)
AllowFocusWhenDisabled

コントロールが無効になっているときにフォーカスを受け取ることができるかどうかを示す値を取得または設定します。

(継承元 FlyoutBase)
AreOpenCloseAnimationsEnabled

ポップアップを開くか閉じたときにアニメーションを再生するかを示す値を取得または設定します。

(継承元 FlyoutBase)
Dispatcher

このオブジェクトが関連付けられている CoreDispatcher を取得します。 CoreDispatcher は、コードが UI 以外のスレッドによって開始された場合でも、UI スレッド上の DependencyObject にアクセスできる機能を表します。

(継承元 DependencyObject)
ElementSoundMode

サウンドを再生するかどうかのコントロールの設定を指定する値を取得または設定します。

(継承元 FlyoutBase)
InputDevicePrefersPrimaryCommands

ポップアップを開くために使用される入力デバイスがセカンダリ コマンドを簡単に開かないかどうかを示す値を取得します。

(継承元 FlyoutBase)
IsConstrainedToRootBounds

ポップアップが XAML ルートの境界内に表示されるかどうかを示す値を取得します。

(継承元 FlyoutBase)
IsOpen

ポップアップが開いているかどうかを示す値を取得します。

(継承元 FlyoutBase)
Items

メニューの内容を生成するために使用されるコレクションを取得します。

LightDismissOverlayMode

ライトを閉じる UI の外側の領域を暗くするかどうかを指定する値を取得または設定します。

(継承元 FlyoutBase)
MenuFlyoutPresenterStyle

MenuFlyout のレンダリング時に使用するスタイルを取得または設定します。

MenuFlyoutPresenterStyleProperty

MenuFlyoutPresenterStyle 依存関係プロパティを識別します。

OverlayInputPassThroughElement

ポップアップのオーバーレイの下にある場合でも、ポインター入力イベントを受け取る要素を取得または設定します。

(継承元 FlyoutBase)
Placement

ポップアップの配置ターゲットに対して使用される既定の配置を取得または設定します。

(継承元 FlyoutBase)
ShouldConstrainToRootBounds

ポップアップを XAML ルートの境界内に表示するかどうかを示す値を取得または設定します。

(継承元 FlyoutBase)
ShowMode

表示時のポップアップの動作を示す値を取得または設定します。

(継承元 FlyoutBase)
Target

ポップアップの配置ターゲットとして使用する要素を取得します。

(継承元 FlyoutBase)
XamlRoot

このポップアップを表示する XamlRoot を取得または設定します。

(継承元 FlyoutBase)

メソッド

ClearValue(DependencyProperty)

依存関係プロパティのローカル値をクリアします。

(継承元 DependencyObject)
CreatePresenter()

派生クラスでオーバーライドされると、派生コントロールに適したポップアップ コンテンツを表示するようにコントロールを初期化します。 注: このメソッドには基底クラスの実装がなく、派生クラスでオーバーライドする必要があります。

(継承元 FlyoutBase)
GetAnimationBaseValue(DependencyProperty)

依存関係プロパティに対して確立された基本値を返します。これは、アニメーションがアクティブでない場合に適用されます。

(継承元 DependencyObject)
GetValue(DependencyProperty)

DependencyObject から依存関係プロパティの現在の有効な値を返します。

(継承元 DependencyObject)
Hide()

ポップアップを閉じます。

(継承元 FlyoutBase)
OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs)

アプリでキーボード ショートカット (アクセラレータ) が処理される直前に呼び出されます。 アプリケーション コードまたは内部プロセスが ProcessKeyboardAccelerators を呼び出すたびに呼び出されます。 このメソッドをオーバーライドして、既定のアクセラレータ処理に影響を与えます。

(継承元 FlyoutBase)
ReadLocalValue(DependencyProperty)

ローカル値が設定されている場合は、依存関係プロパティのローカル値を返します。

(継承元 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

この DependencyObject インスタンスの特定の DependencyProperty に対する変更をリッスンするための通知関数を登録します。

(継承元 DependencyObject)
SetValue(DependencyProperty, Object)

DependencyObject の依存関係プロパティのローカル値を設定します。

(継承元 DependencyObject)
ShowAt(DependencyObject, FlyoutShowOptions)

指定したオプションを使用して、指定した要素に対して配置されたポップアップを表示します。

(継承元 FlyoutBase)
ShowAt(FrameworkElement)

指定した要素に対して配置されたポップアップを表示します。

(継承元 FlyoutBase)
ShowAt(UIElement, Point)

指定したターゲット要素を基準にして、指定したオフセットに配置されたポップアップを表示します。

TryInvokeKeyboardAccelerator(ProcessKeyboardAcceleratorEventArgs)

キーボード ショートカット (アクセラレータ) を呼び出そうとします。

(継承元 FlyoutBase)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

RegisterPropertyChangedCallback を呼び出して以前に登録した変更通知を取り消します。

(継承元 DependencyObject)

イベント

Closed

ポップアップが非表示のときに発生します。

(継承元 FlyoutBase)
Closing

ポップアップが非表示になり始めると発生します。

(継承元 FlyoutBase)
Opened

ポップアップが表示されるときに発生します。

(継承元 FlyoutBase)
Opening

ポップアップが表示される前に発生します。

(継承元 FlyoutBase)

適用対象

こちらもご覧ください