コマンドバーのポップアップ

[アーティクル]
07/04/2024

コマンドバーのポップアップを使用すると、UI キャンバス上の要素に関連した移動可能なツールバーにコマンドを表示することによって、一般的なタスクへの簡単なアクセスをユーザーに提供できます。

展開されたテキスト校正コマンドバーのポップアップ

CommandBar と同様に、CommandBarFlyout には、コマンドを追加するために使用できる PrimaryCommands プロパティと SecondaryCommands プロパティがあります。コマンドは、どちらかまたは両方のコレクションに配置できます。プライマリとセカンダリのコマンドが、どのような場合にどのような方法で表示されるかは、表示モードによって異なります。

コマンドバーのポップアップには、"折りたたみ" と "展開" の 2 つの表示モードがあります。

折りたたみモードでは、プライマリコマンドのみが表示されます。コマンドバーポップアップにプライマリコマンドとセカンダリコマンドの両方がある場合は、省略記号 [...] で表される "詳細を表示" ボタンが表示されます。これにより、ユーザーは展開モードに切り替えることでセカンダリコマンドにアクセスできます。
展開モードでは、プライマリとセカンダリの両方のコマンドが表示されます (コントロールにセカンダリ項目のみが含まれる場合、それらの項目は MenuFlyout コントロールと同様の方法で表示されます)。

これは適切なコントロールですか?

アプリキャンバス上の要素のコンテキストでボタンやメニュー項目などのコマンドのコレクションをユーザーに表示するには、コマンドバーポップアップコントロールを使用します。

コマンドバーポップアップは、コンテキストメニューを作成する際に推奨されるコントロールです。これにより、コンテキストメニューのシナリオでコンテキストに最も関連する一般的なコマンド (コピー、切り取り、貼り付け、削除、共有、テキスト選択など) をプライマリコマンドとして追加し、コマンドバーポップアップに横一列に表示できるようになります。 TextCommandBarFlyout は、TextBox、TextBlock、RichEditBox、RichTextBlock、PasswordBox の各コントロールにテキストコマンドを自動的に表示するように、既に適切に構成されています。 CommandBarFlyout を使用して、テキストコントロールの既定のテキストコマンドを置き換えることができます。

リストアイテムのコンテキストコマンドを表示するには、「コレクションとリストのコンテキストコマンドの実行」にあるガイダンスに従います。

事前と事後の呼び出し

UI キャンバス上の要素に関連付けられたポップアップまたはメニューを呼び出すには、通常、2 つの方法があります。事前呼び出しと事後呼び出しです。

事前呼び出しでは、コマンドは、コマンドが関連付けられた項目をユーザーが操作するときに自動的に表示されます。たとえば、テキストの書式設定コマンドは、ユーザーがテキストボックス内のテキストを選択したときにポップアップ表示することができます。この場合、コマンドバーのポップアップにフォーカスは移りません。そうではなく、ユーザーが操作している項目の近くに関連するコマンドが表示されます。ユーザーがコマンドを操作しない場合、コマンドは閉じられます。

事後呼び出しでは、コマンドは、コマンドを要求する明示的なユーザー操作 (たとえば右クリック) に対する応答として表示されます。これは、従来のコンテキストメニューの概念に対応します。

CommandBarFlyout は、どちらの方法でも使用できます。または、2 つの方法を混合することもできます。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリの CommandBarFlyout コントロールは、WinUI 2 の一部として含まれています。インストール手順などの詳細については、「WinUI 2」を参照してください。このコントロールの API は、Windows.UI.Xaml.Controls (UWP) と Microsoft.UI.Xaml.Controls (WinUI) 名前空間の両方に存在します。

UWP API: CommandBarFlyout クラス、 TextCommandBarFlyout クラス、 AppBarButton クラス、 AppBarToggleButton クラス、 AppBarSeparator クラス
WinUI 2 Apis: CommandBarFlyout クラス、 TextCommandBarFlyout クラス
WinUI 2 ギャラリーアプリを開き、CommandBarFlyout の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸みのある角を使用するこのコントロールの新しいテンプレートが含まれます。詳しくは、「角の半径」をご覧ください。

WinUI 2 でこの記事のコードを使用するには、XAML のエイリアスを使って (ここでは muxc を使用)、プロジェクトに含まれる Windows UI ライブラリ API を表します。詳細については、「WinUI 2 の概要」を参照してください。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:CommandBarFlyout />

重要な API: CommandBarFlyout クラス、 TextCommandBarFlyout クラス、 AppBarButton クラス、 AppBarToggleButton クラス、 AppBarSeparator クラス

WinUI 3 ギャラリーアプリを開き、CommandBarFlyout の動作を確認します。

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

この例では、コマンドバーのポップアップを作成し、事前および事後に使用する方法を示します。画像がタップされたとき、ポップアップが折りたたみモードで表示されます。コンテキストメニューとして表示されるとき、ポップアップは展開モードで表示されます。どちらの場合も、ユーザーはポップアップが開いた後に、ポップアップを展開するか折りたたむことができます。

<Grid>
    <Grid.Resources>
        <CommandBarFlyout x:Name="ImageCommandsFlyout">
            <AppBarButton Label="Favorite" Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
            <AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy"/>
            <AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share"/>
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Rotate" Icon="Rotate"/>
                <AppBarButton Label="Delete" Icon="Delete"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{x:Bind ImageCommandsFlyout}"
           ContextFlyout="{x:Bind ImageCommandsFlyout}"/>
</Grid>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
    var options = new FlyoutShowOptions()
    {
        // Position shows the flyout next to the pointer.
        // "Transient" ShowMode makes the flyout open in its collapsed state.
        Position = e.GetPosition((FrameworkElement)sender),
        ShowMode = FlyoutShowMode.Transient
    };
    flyout?.ShowAt((FrameworkElement)sender, options);
}

折りたたまれた状態のコマンドバーポップアップを次に示します。

折りたたまれたコマンドバーのポップアップの例

セカンダリコマンドを示す展開された状態の同じコマンドバーポップアップを次に示します。

展開されたコマンドバーのポップアップの例

コマンドの事前表示

コンテキストに応じたコマンドを事前に表示するとき、既定ではプライマリコマンドのみが表示されます (コマンドバーのポップアップは折りたたまれます)。最も重要なコマンドをプライマリコマンドのコレクションに配置し、従来のコンテキストメニューに表示されるその他のコマンドをセカンダリコマンドのコレクションに配置します。

コマンドを事前に表示するには、通常、Click または Tapped イベントを処理してコマンドバーのポップアップを表示します。ポップアップの ShowMode を Transient または TransientWithDismissOnPointerMoveAway に設定して、フォーカスを移さずに折りたたみモードでポップアップを開きます。

テキストコントロールには SelectionFlyout プロパティがあります。このプロパティにポップアップを割り当てると、テキストが選択されたときにポップアップが自動的に表示されます。

コマンドの事後表示

コンテキストコマンドをコンテキストメニューとして事後表示すると、セカンダリコマンドが既定で表示されます (コマンドバーのポップアップは展開されます)。この場合、コマンドバーのポップアップには、プライマリとセカンダリの両方のコマンドが含まれる場合と、セカンダリコマンドのみが含まれる場合があります。

コンテキストメニューにコマンドを表示するには、通常、UI 要素の ContextFlyout プロパティにポップアップを割り当てます。この方法では、ポップアップを開く処理がその要素によって行われ、それ以上何もする必要がありません。

ポップアップの表示を (たとえば RightTapped イベント発生時に) 自分で処理する場合は、ポップアップの ShowMode を Standard に設定して、展開モードでポップアップを開いてフォーカスを移します。

ヒント

ポップアップを表示するときのオプションおよびポップアップの配置を制御する方法の詳細については、「ポップアップ」を参照してください。

常に展開された CommandBarFlyout の表示

CommandBarFlyout にプライマリコマンドとセカンダリコマンドがある場合は、"詳細を表示" [...] ボタンが既定で表示され、セカンダリコマンドの展開と折りたたみに使用できます。 CommandBarFlyout を展開モードで維持し、セカンダリコマンドを常に表示する場合は、CommandBarFlyout.AlwaysExpanded プロパティを使用します。

AlwaysExpanded プロパティが true に設定されている場合、"詳細を表示" ボタンは表示されず、ユーザーはコントロールの展開状態を切り替えることができません。セカンダリコマンドがクリックされたときや、ユーザーがポップアップの外側をクリックすると、CommandBarFlyout は通常どおり閉じられます。

このプロパティは、CommandBarFlyout にセカンダリコマンドがある場合にのみ有効です。セカンダリコマンドがない場合、CommandBarFlyout は常に折りたたみモードになります。

ヒント

AlwaysExpanded プロパティが true に設定されている場合でも、IsOpen プロパティを設定することで、CommandBarFlyout の折りたたみと展開をプログラムで実行できます。

コマンドとコンテンツ

CommandBarFlyout コントロールには、コマンドおよびコンテンツを追加するために使用できる PrimaryCommands and SecondaryCommands の 2 つのプロパティがあります。

既定では、コマンドバー項目は PrimaryCommands コレクションに追加されます。これらのコマンドはコマンドバーに表示され、折りたたみモードと展開モードの両方で表示されます。 CommandBar とは異なり、プライマリコマンドがセカンダリコマンドに自動的にオーバーフローされることはなく、プライマリコマンドは切り捨てられる可能性があります。

SecondaryCommands コレクションにコマンドを追加することもできます。セカンダリコマンドは、コントロールのメニューの部分に表示され、展開モードでのみ表示されます。

シナリオにとって重要な一般的なコマンド (コピー、切り取り、貼り付け、削除、共有、テキスト選択など) がある場合は、それらをセカンダリコマンドではなくプライマリコマンドとして追加することをお勧めします。

アプリバーボタン

PrimaryCommands と SecondaryCommands には、AppBarButton、AppBarToggleButton、AppBarSeparator の各コントロールを直接入力できます。

アプリバーボタンコントロールは、アイコンとテキストラベルによって特徴付けられます。これらのコントロールは、コマンドバーで使うように最適化されており、コマンドバーとオーバーフローメニューのどちらに表示されるかに応じて外観が変化します。

Windows App SDK 1.5 以降: プライマリコマンドとして使用されるアプリバーボタンは、テキストラベルとアイコンの両方 (両方が設定されている場合) と共にコマンドバーに表示されます。
```
<AppBarButton Icon="Copy" Label="Copy"/>
```
Windows App SDK 1.4 以降:プライマリコマンドとして使用されるアプリバーのボタンは、アイコンだけがコマンドバーに表示されます。テキストラベルは表示されません。コマンドの説明テキストを表示するには、次に示すようにヒントを使用することをお勧めします。
```
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
```
セカンダリコマンドとして使用されるアプリバーボタンは、ラベルとアイコンの両方がメニューに表示されます。

アイコン

次のメニュー項目アイコンを指定することを検討してください。

最もよく使われる項目。
アイコンが一般的またはよく知られているメニュー項目。
アイコンがコマンドの役割を適切に示すメニュー項目。

標準の視覚化がないコマンドのアイコンの提供は義務ではありません。わかりづらいアイコンは役に立たず、視覚的な混乱をもたらし、ユーザーが重要なメニュー項目に集中できなくなります。

その他のコンテンツ

他のコントロールを AppBarElementContainer にラップすることによって、コマンドバーのポップアップに追加できます。これにより、DropDownButton や SplitButton などのコントロールを追加したり、StackPanel のようなコンテナーを追加したりして、より複雑な UI を作成できます。

コマンドバーのポップアップの、プライマリまたはセカンダリのコマンドのコレクションに要素を追加するには、要素で ICommandBarElement インターフェイスを実装する必要があります。 AppBarElementContainer は、このインターフェイスを実装するラッパーです。これにより、要素自体にインターフェイスが実装されていない場合でも、コマンドバーに要素を追加できます。

ここでは、AppBarElementContainer を使用してコマンドバーのポップアップに追加の要素を加えています。 SplitButton がプライマリコマンドに追加され、テキストの配置が有効になります。ズームコントロールのより複雑なレイアウトを可能にするために、StackPanel がセカンダリコマンドに追加されます。

ヒント

既定では、アプリキャンバス用に設計された要素は、コマンドバーで正しく表示されない可能性があります。 AppBarElementContainer を使用して要素を追加するときには、その要素を他のコマンドバー要素と一致させるために実行する必要がある、いくつかの手順があります。

既定のブラシを lightweight styling でオーバーライドして、要素の背景と境界線をアプリバーのボタンと一致させます。
要素のサイズと位置を調整します。
16 ピクセルの Width と Height を持つ Viewbox にアイコンをラップします。

Note

この例では、コマンドバーのポップアップ UI のみを示しています。示されているコマンドはどれも実装されていません。コマンドの実装の詳細については、「ボタン」およびコマンド設計の基本に関するページを参照してください。

<CommandBarFlyout>
    <AppBarButton Icon="Cut" Label="Cut" ToolTipService.ToolTip="Cut"/>
    <AppBarButton Icon="Copy" Label="Copy" ToolTipService.ToolTip="Copy"/>
    <AppBarButton Icon="Paste" Label="Paste" ToolTipService.ToolTip="Paste"/>
    <!-- Alignment controls -->
    <AppBarElementContainer>
         <SplitButton ToolTipService.ToolTip="Alignment">
            <SplitButton.Resources>
                <!-- Override default brushes to make the SplitButton 
                     match other command bar elements. -->
                <Style TargetType="SplitButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="SplitButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </SplitButton.Resources>
            <SplitButton.Content>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="AlignLeft"/>
                </Viewbox>
            </SplitButton.Content>
            <SplitButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Icon="AlignLeft" Text="Align left"/>
                    <MenuFlyoutItem Icon="AlignCenter" Text="Center"/>
                    <MenuFlyoutItem Icon="AlignRight" Text="Align right"/>
                </MenuFlyout>
            </SplitButton.Flyout>
        </SplitButton>
    </AppBarElementContainer>
    <!-- end Alignment controls -->
    <CommandBarFlyout.SecondaryCommands>
        <!-- Zoom controls -->
        <AppBarElementContainer>
            <AppBarElementContainer.Resources>
                <!-- Override default brushes to make the Buttons
                     match other command bar elements. -->
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
                <Style TargetType="TextBlock">
                    <Setter Property="VerticalAlignment" Value="Center"/>
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="Width" Value="40"/>
                </Style>
            </AppBarElementContainer.Resources>
            <Grid Margin="12,-4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="76"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="Zoom"/>
                </Viewbox>
                <TextBlock Text="Zoom" Margin="10,0,0,0" Grid.Column="1"/>
                <StackPanel Orientation="Horizontal" Grid.Column="2">
                    <Button ToolTipService.ToolTip="Zoom out">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomOut"/>
                        </Viewbox>
                    </Button>
                    <TextBlock Text="50%" Width="40"
                               HorizontalTextAlignment="Center"/>
                    <Button ToolTipService.ToolTip="Zoom in">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomIn"/>
                        </Viewbox>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBarElementContainer>
        <!-- end Zoom controls -->
        <AppBarSeparator/>
        <AppBarButton Label="Undo" Icon="Undo"/>
        <AppBarButton Label="Redo" Icon="Redo"/>
        <AppBarButton Label="Select all" Icon="SelectAll"/>
    </CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>

開いた SplitButton を持つ折りたたまれたコマンドバーのポップアップを次に示します。

メニューにカスタムズーム UI が表示された、展開されたコマンドバーのポップアップを次に示します。

複雑な UI を使用したコマンドバーのポップアップ

セカンダリコマンドのみを含むコマンドバーポップアップを使用して、メニューポップアップと同じ外観と動作を実現するコンテキストメニューを作成できます。

<Grid>
    <Grid.Resources>
        <!-- A command bar flyout with only secondary commands. -->
        <CommandBarFlyout x:Name="ContextMenu">
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Copy" Icon="Copy"/>
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Print" Icon="Print"/>
                <AppBarSeparator />
                <AppBarButton Label="Properties"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           ContextFlyout="{x:Bind ContextMenu}"/>
</Grid>

コンテキストメニューとしてのコマンドバーのポップアップを次に示します。

CommandBarFlyout を DropDownButton と共に使用して、標準メニューを作成することもできます。

<CommandBarFlyout>
    <AppBarButton Icon="Placeholder"/>
    <AppBarElementContainer>
        <DropDownButton Content="Mail">
            <DropDownButton.Resources>
                <!-- Override default brushes to make the DropDownButton
                     match other command bar elements. -->
                <Style TargetType="DropDownButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>

                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </DropDownButton.Resources>
            <DropDownButton.Flyout>
                <CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                    <CommandBarFlyout.SecondaryCommands>
                        <AppBarButton Icon="MailReply" Label="Reply"/>
                        <AppBarButton Icon="MailReplyAll" Label="Reply all"/>
                        <AppBarButton Icon="MailForward" Label="Forward"/>
                    </CommandBarFlyout.SecondaryCommands>
                </CommandBarFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
    </AppBarElementContainer>
    <AppBarButton Icon="Placeholder"/>
    <AppBarButton Icon="Placeholder"/>
</CommandBarFlyout>

コマンドバーのポップアップでのドロップダウンボタンメニューを次に示します。

ドロップダウンボタンメニューを使用したコマンドバーのポップアップ

テキストコントロール用のコマンドバーのポップアップ

TextCommandBarFlyout は、テキストを編集するためのコマンドを含む特殊なコマンドバーのポップアップです。各テキストコントロールでは、コンテキストメニュー (右クリック) として、またはテキストが選択されたときに、自動的に TextCommandBarFlyout が表示されます。テキストコマンドバーのポップアップでは、テキストの選択に適応して、関連するコマンドのみが表示されます。

テキスト選択時のテキストコマンドバーのポップアップを次に示します。

折りたたまれたテキストコマンドバーのポップアップ

セカンダリコマンドを示す拡張テキストコマンドバーポップアップを次に示します。

展開されたテキストコマンドバーのポップアップ

使用可能なコマンド

次の表に、TextCommandBarFlyout に含まれているコマンドと、各コマンドがどのような場合に表示されるかを示します。

command	表示される場合
太字	テキストコントロールが読み取り専用でない場合 (RichEditBox のみ)。
Normal	テキストコントロールが読み取り専用でない場合 (RichEditBox のみ)。
下線	テキストコントロールが読み取り専用でない場合 (RichEditBox のみ)。
Proofing	IsSpellCheckEnabled が true で、スペルミスのテキストが選択されている場合。
切り取り	テキストコントロールが読み取り専用ではなく、テキストが選択されている場合。
コピー	テキストが選択されている場合。
貼り付け	テキストコントロールが読み取り専用ではなく、クリップボードが空でない場合。
元に戻す	元に戻すことができるアクションがある場合。
すべて選択する	テキストを選択できる場合。

カスタムテキストコマンドバーのポップアップ

TextCommandBarFlyout はカスタマイズできず、各テキストコントロールによって自動的に管理されます。ただし、既定の TextCommandBarFlyout をカスタムコマンドで置き換えることができます。

テキスト選択時に表示される既定の TextCommandBarFlyout を置き換えるために、カスタム CommandBarFlyout (またはその他の種類のポップアップ) を作成して、SelectionFlyout プロパティに割り当てることができます。 SelectionFlyout を null に設定した場合、選択時にコマンドは表示されません。
コンテキストメニューとして表示される既定の TextCommandBarFlyout を置き換えるには、カスタムの CommandBarFlyout (またはその他の種類のポップアップ) をテキストコントロールの ContextFlyout プロパティに割り当てます。 ContextFlyout を null に設定すると、以前のバージョンのテキストコントロールに表示されるメニューポップアップが、TextCommandBarFlyout の代わりに表示されます。

簡易非表示

簡易非表示コントロール (メニュー、コンテキストメニュー、その他のポップアップ) は、閉じられるまで一時的な UI にキーボードやゲームパッドのフォーカスを捕捉します。この動作の視覚的な手掛かりを提供するために、Xbox の light dismiss コントロールは、範囲外の UI の可視性を下げるオーバーレイを描画します。この動作は、LightDismissOverlayMode プロパティを使って変更できます。既定で、一時的な UI によって Xbox 上では簡易非表示オーバーレイが描画されます (自動) が、他のデバイスファミリ上では描画されません。オーバーレイは、常に On にするか、常に Off にするかを選択できます。

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

サンプルコードの入手

WinUI ギャラリーサンプル - すべての XAML コントロールを対話形式で参照できます。
XAML コマンド実行のサンプル

次の方法で共有

これは適切なコントロールですか?

事前と事後の呼び出し

UWP と WinUI 2