MenuFlyout クラス
定義
重要
一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。
コマンドのメニューを表示するポップアップを表します。
/// [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 : FlyoutBasePublic Class MenuFlyout
Inherits FlyoutBase<MenuFlyout>
oneOrMoreItems
</MenuFlyout>
- 継承
- 派生
- 属性
例
ヒント
詳細、設計ガイダンス、およびコード例については、「 メニューとコンテキスト メニュー」を参照してください。
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 プロパティを使って、メニューとして 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 プロパティを使用します。
FlyoutBase.AttachedFlyout 添付プロパティを使用して、MenuFlyout を通常のメニューとして他のコントロールに関連付けることができます。 FlyoutBase.AttachedFlyout を使用して MenuFlyout が他の UI 要素に割り当てられている場合、ポップアップを表示するには、ShowAt メソッドまたは静的 ShowAttachedFlyout メソッドを呼び出す必要があります。
コントロール のスタイルとテンプレート
既定の Style と 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 スタイルに関する記事の「軽量のスタイル設定」セクションを参照してください。
コンストラクター
| MenuFlyout() |
MenuFlyout クラスの新しいインスタンスを初期化します。 |
プロパティ
| AllowFocusOnInteraction |
ユーザーが操作するときに要素が自動的にフォーカスを取得するかどうかを示す値を取得または設定します。 (継承元 FlyoutBase) |
| AllowFocusWhenDisabled |
コントロールが無効になっているときにフォーカスを受け取ることができるかどうかを示す値を取得または設定します。 (継承元 FlyoutBase) |
| AreOpenCloseAnimationsEnabled |
ポップアップを開くか閉じたときにアニメーションを再生するかを示す値を取得または設定します。 (継承元 FlyoutBase) |
| Dispatcher |
常に Windows アプリ SDK アプリで を返します |
| DispatcherQueue |
このオブジェクトが |
| ElementSoundMode |
サウンドを再生するかどうかのコントロールの設定を指定する値を取得または設定します。 (継承元 FlyoutBase) |
| InputDevicePrefersPrimaryCommands |
ポップアップを開くために使用される入力デバイスがセカンダリ コマンドを簡単に開かないかどうかを示す値を取得します。 (継承元 FlyoutBase) |
| IsConstrainedToRootBounds |
ポップアップが XAML ルートの境界内に表示されるかどうかを示す値を取得します。 このプロパティは、Windows アプリ SDK アプリでは常に true です。 (継承元 FlyoutBase) |
| IsOpen |
ポップアップが開いているかどうかを示す値を取得します。 (継承元 FlyoutBase) |
| Items |
メニューの内容を生成するために使用されるコレクションを取得します。 |
| LightDismissOverlayMode |
ライトを閉じる UI の外側の領域を暗くするかどうかを指定する値を取得または設定します。 (継承元 FlyoutBase) |
| MenuFlyoutPresenterStyle |
MenuFlyout のレンダリング時に使用するスタイルを取得または設定します。 |
| MenuFlyoutPresenterStyleProperty |
MenuFlyoutPresenterStyle 依存関係プロパティを識別します。 |
| OverlayInputPassThroughElement |
ポップアップのオーバーレイの下にある場合でも、ポインター入力イベントを受け取る要素を取得または設定します。 (継承元 FlyoutBase) |
| Placement |
ポップアップの配置ターゲットに対して使用される既定の配置を取得または設定します。 (継承元 FlyoutBase) |
| ShouldConstrainToRootBounds |
ポップアップを XAML ルートの境界内に表示するかどうかを示す値を取得または設定します。 (継承元 FlyoutBase) |
| ShowMode |
表示時のポップアップの動作を示す値を取得または設定します。 (継承元 FlyoutBase) |
| SystemBackdrop |
このポップアップに適用するシステム背景を取得または設定します。 背景はポップアップ コンテンツの背後にレンダリングされます。 (継承元 FlyoutBase) |
| Target |
ポップアップの配置ターゲットとして使用する要素を取得します。 (継承元 FlyoutBase) |
| XamlRoot |
このポップアップを表示する XamlRoot を取得または設定します。 (継承元 FlyoutBase) |
メソッド
イベント
| Closed |
ポップアップが非表示のときに発生します。 (継承元 FlyoutBase) |
| Closing |
ポップアップが非表示になり始めると発生します。 (継承元 FlyoutBase) |
| Opened |
ポップアップが表示されるときに発生します。 (継承元 FlyoutBase) |
| Opening |
ポップアップが表示される前に発生します。 (継承元 FlyoutBase) |
適用対象
こちらもご覧ください
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示