MenuFlyout クラス
定義
重要
一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。
コマンドのメニューを表示するポップアップを表します。
/// [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 : FlyoutBasePublic Class MenuFlyout
Inherits FlyoutBase<MenuFlyout>
oneOrMoreItems
</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 の他のメンバーがあります。
- FlyoutBase.AttachedFlyout: MenuFlyout を特定の UI 要素に関連付ける添付プロパティ (任意 の FrameworkElement 派生クラスを指定できます)。
- ShowAttachedFlyout: ポップアップが FlyoutBase.AttachedFlyout の使用によって UI 要素に既に関連付けられているかどうかを判断できる静的メソッドです。 その場合、メソッドは指定した FrameworkElement を使用して ShowAt を内部的に呼び出します。
コントロール のスタイルとテンプレート
既定の Style と ControlTemplate を変更して、コントロールに一意の外観を与えることができます。 コントロールのスタイルとテンプレートの変更の詳細については、「コントロールの スタイル設定」を参照してください。 コントロールの外観を定義する既定のスタイル、テンプレート、およびリソースがファイルに 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) |
メソッド
イベント
| Closed |
ポップアップが非表示のときに発生します。 (継承元 FlyoutBase) |
| Closing |
ポップアップが非表示になり始めると発生します。 (継承元 FlyoutBase) |
| Opened |
ポップアップが表示されるときに発生します。 (継承元 FlyoutBase) |
| Opening |
ポップアップが表示される前に発生します。 (継承元 FlyoutBase) |