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

[アーティクル]
06/02/2023

コマンドバーのポップアップを使用すると、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 コントロールは、Windows UI ライブラリ 2 の一部として含まれています。インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。このコントロールの 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 Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
            <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
            <AppBarButton Icon="Share" ToolTipService.ToolTip="Share"/>
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Select all"/>
                <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 コントロールには、コマンドおよびコンテンツを追加するために使用できるプロパティが 2 つあります。PrimaryCommands と SecondaryCommands です。

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

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

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

アプリバーのボタン

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

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

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

アイコン

次のようなメニュー項目のアイコンを用意することを検討します。

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

標準的な視覚表現がないコマンドにアイコンを用意しなければならないと考える必要はありません。わかりづらいアイコンは役に立たず、視覚的な混乱をもたらし、ユーザーが重要なメニュー項目に集中できなくなります。

その他のコンテンツ

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

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

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

ヒント

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

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

注意

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

<CommandBarFlyout>
    <AppBarButton Icon="Cut" ToolTipService.ToolTip="Cut"/>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
    <AppBarButton Icon="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>

分割ボタンが開いている折りたたまれたコマンドバーポップアップを次に示します。

メニューのカスタムズーム 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 に含まれているコマンドと、各コマンドがどのような場合に表示されるかを示します。

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

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

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

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

簡易非表示

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

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

サンプルコードを入手する

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

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

事前と事後の呼び出し

UWP と WinUI 2