コマンド バーのポップアップCommand bar flyout

コマンド バーのポップアップを使用すると、UI キャンバス上の要素に関連した移動可能なツールバーにコマンドを表示することによって、一般的なタスクへの簡単なアクセスをユーザーに提供できます。The command bar flyout lets you provide users with easy access to common tasks by showing commands in a floating toolbar related to an element on your UI canvas.

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

CommandBarFlyout には、Windows 10 Version 1809 (SDK 17763) 以降、または Windows UI ライブラリが必要です。CommandBarFlyout requires Windows 10, version 1809 (SDK 17763) or later, or the Windows UI Library.

CommandBar と同様に、CommandBarFlyout には、コマンドを追加するために使用できる PrimaryCommands プロパティと SecondaryCommands プロパティがあります。Like CommandBar, CommandBarFlyout has PrimaryCommands and SecondaryCommands properties you can use to add commands. コマンドは、どちらかまたは両方のコレクションに配置できます。You can place commands in either collection, or both. プライマリとセカンダリのコマンドが、どのような場合にどのような方法で表示されるかは、表示モードによって異なります。When and how the primary and secondary commands are displayed depends on the display mode.

コマンド バーのポップアップには、"折りたたみ" と "展開" の 2 つの表示モードがあります。The command bar flyout has two display modes: collapsed and expanded.

  • 折りたたみモードでは、プライマリ コマンドのみが表示されます。In the collapsed mode, only the primary commands are shown. コマンド バーのポップアップにプライマリとセカンダリの両方のコマンドが含まれる場合は、省略記号 [•••] によって表される "see more" (詳細表示) ボタンが表示されます。If your command bar flyout has both primary and secondary commands, a "see more" button, which is represented by an ellipsis [•••], is displayed. これにより、ユーザーは展開モードに切り替えることでセカンダリ コマンドにアクセスできます。This lets the user get access to the secondary commands by transitioning to expanded mode.
  • 展開モードでは、プライマリとセカンダリの両方のコマンドが表示されますIn the expanded mode, both the primary and secondary commands are shown. (コントロールにセカンダリ項目のみが含まれる場合、それらの項目は MenuFlyout コントロールと同様の方法で表示されます)。(If the control has only secondary items, they are shown in a way similar to the MenuFlyout control.)

適切なコントロールの選択Is this the right control?

アプリ キャンバス上の要素のコンテキスト内でボタンやメニュー項目などのコマンドのコレクションをユーザーに表示するには、CommandBarFlyout コントロールを使用します。Use the CommandBarFlyout control to show a collection of commands to the user, such as buttons and menu items, in the context of an element on the app canvas.

TextCommandBarFlyout では、TextBox、TextBlock、RichEditBox、RichTextBlock、および PasswordBox コントロールにテキスト コマンドが表示されます。The TextCommandBarFlyout displays text commands in TextBox, TextBlock, RichEditBox, RichTextBlock, and PasswordBox controls. コマンドは、現在のテキスト選択に応じて適切に、自動的に構成されます。The commands are automatically configured appropriately to the current text selection. テキスト コントロールの既定のテキスト コマンドを置き換えるには、CommandBarFlyout を使用します。Use a CommandBarFlyout to replace the default text commands on text controls.

リスト アイテムのコンテキスト コマンドを表示するには、「コレクションとリストのコンテキスト コマンドの実行」にあるガイダンスに従います。To show contextual commands on list items follow the guidance in Contextual commanding for collections and lists.

CommandBarFlyout と MenuFlyoutCommandBarFlyout vs MenuFlyout

コンテキスト メニューにコマンドを表示するには、CommandBarFlyout または MenuFlyout を使用できます。To show commands in a context menu, you can use CommandBarFlyout or MenuFlyout. MenuFlyout よりも多くの機能が提供されているため、CommandBarFlyout をお勧めします。We recommend CommandBarFlyout because it provides more functionality than MenuFlyout. セカンダリ コマンドのみを含む CommandBarFlyout を使用して MenuFlyout の動作と外観を得ることも、プライマリとセカンダリの両方のコマンドを含む完全なコマンド バーのポップアップを使用することもできます。You can use CommandBarFlyout with only secondary commands to get the behavior and look of a MenuFlyout, or use the full command bar flyout with both primary and secondary commands.

関連する情報については、「ポップアップ」、「メニューとショートカット メニュー」、「コマンド バー」を参照してください。For related info, see Flyouts, Menus and context menus, and Command bars.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、CommandBarFlyout の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the CommandBarFlyout in action.

事前と事後の呼び出しProactive vs. reactive invocation

UI キャンバス上の要素に関連付けられたポップアップまたはメニューを呼び出すには、通常、2 つの方法があります。_事前呼び出し_と_事後呼び出し_です。There are typically two ways to invoke a flyout or menu that's associated with an element on your UI canvas: proactive invocation and reactive invocation.

事前呼び出しでは、コマンドは、コマンドが関連付けられた項目をユーザーが操作するときに自動的に表示されます。In proactive invocation, commands appear automatically when the user interacts with the item that the commands are associated with. たとえば、テキストの書式設定コマンドは、ユーザーがテキスト ボックス内のテキストを選択したときにポップアップ表示することができます。For example, text formatting commands might pop up when the user selects text in a text box. この場合、コマンド バーのポップアップにフォーカスは移りません。In this case, the command bar flyout does not take focus. そうではなく、ユーザーが操作している項目の近くに関連するコマンドが表示されます。Instead, it presents relevant commands close to the item the user is interacting with. ユーザーがコマンドを操作しない場合、コマンドは閉じられます。If the user doesn't interact with the commands, they are dismissed.

事後呼び出しでは、コマンドは、コマンドを要求する明示的なユーザー操作 (たとえば右クリック) に対する応答として表示されます。In reactive invocation, commands are shown in response to an explicit user action to request the commands; for example, a right-click. これは、従来のコンテキスト メニューの概念に対応します。This corresponds to the traditional concept of a context menu.

CommandBarFlyout は、どちらの方法でも使用できます。または、2 つの方法を混合することもできます。You can use the CommandBarFlyout in either way, or even a mixture of the two.

コマンド バーのポップアップの作成Create a command bar flyout

この例では、コマンド バーのポップアップを作成し、事前および事後に使用する方法を示します。This example shows how to create a command bar flyout and use it both proactively and reactively. 画像がタップされたとき、ポップアップが折りたたみモードで表示されます。When the image is tapped, the flyout is shown in its collapsed mode. コンテキスト メニューとして表示されるとき、ポップアップは展開モードで表示されます。When shown as a context menu, the flyout is shown in its expanded mode. どちらの場合も、ユーザーはポップアップが開いた後に、ポップアップを展開するか折りたたむことができます。In either case, the user can expand or collapse the flyout after it's opened.

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

折りたたまれたコマンド バーのポップアップA collapsed command bar flyout

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

展開されたコマンド バーのポップアップAn expanded command bar flyout

<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);
}

コマンドの事前表示Show commands proactively

コンテキストに応じたコマンドを事前に表示するとき、既定ではプライマリ コマンドのみが表示されます (コマンド バーのポップアップは折りたたまれます)。When you show contextual commands proactively, only the primary commands should be shown by default (the command bar flyout should be collapsed). 最も重要なコマンドをプライマリ コマンドのコレクションに配置し、従来のコンテキスト メニューに表示されるその他のコマンドをセカンダリ コマンドのコレクションに配置します。Place the most important commands in the primary commands collection, and additional commands that would traditionally go in a context menu into the secondary commands collection.

コマンドを事前に表示するには、通常、Click または Tapped イベントを処理してコマンド バーのポップアップを表示します。To proactively show commands, you typically handle the Click or Tapped event to show the command bar flyout. ポップアップの ShowModeTransient または TransientWithDismissOnPointerMoveAway に設定して、フォーカスを移さずに折りたたみモードでポップアップを開きます。Set the flyout's ShowMode to Transient or TransientWithDismissOnPointerMoveAway to open the flyout in its collapsed mode without taking focus.

Windows 10 Insider Preview 以降、テキスト コントロールに SelectionFlyout プロパティが用意されています。Starting in the Windows 10 Insider Preview, text controls have a SelectionFlyout property. このプロパティにポップアップを割り当てると、テキストが選択されたときにポップアップが自動的に表示されます。When you assign a flyout to this property, it is automatically shown when text is selected.

コマンドの事後表示Show commands reactively

コンテキスト コマンドをコンテキスト メニューとして事後表示すると、セカンダリ コマンドが既定で表示されます (コマンド バーのポップアップは展開されます)。When you show contextual commands reactively, as a context menu, the secondary commands are shown by default (the command bar flyout should be expanded). この場合、コマンド バーのポップアップには、プライマリとセカンダリの両方のコマンドが含まれる場合と、セカンダリ コマンドのみが含まれる場合があります。In this case, the command bar flyout might have both primary and secondary commands, or secondary commands only.

コンテキスト メニューにコマンドを表示するには、通常、UI 要素の ContextFlyout プロパティにポップアップを割り当てます。To show commands in a context menu, you typically assign the flyout to the ContextFlyout property of a UI element. この方法では、ポップアップを開く処理がその要素によって行われ、それ以上何もする必要がありません。This way, opening the flyout is handled by the element, and you don't need to do anything more.

ポップアップの表示を (たとえば RightTapped イベント発生時に) 自分で処理する場合は、ポップアップの ShowModeStandard に設定して、展開モードでポップアップを開いてフォーカスを移します。If you handle showing the flyout yourself (for example, on a RightTapped event), set the flyout's ShowMode to Standard to open the flyout in its expanded mode and give it focus.

ヒント

ポップアップを表示するときのオプションおよびポップアップの配置を制御する方法の詳細については、「ポップアップ」を参照してください。For more info about options when showing a flyout and how to control placement of the flyout, see Flyouts.

コマンドとコンテンツCommands and content

CommandBarFlyout コントロールには、コマンドおよびコンテンツを追加するために使用できるプロパティが 2 つあります。PrimaryCommandsSecondaryCommands です。The CommandBarFlyout control has 2 properties you can use to add commands and content: PrimaryCommands and SecondaryCommands.

既定では、コマンド バーの項目は PrimaryCommands コレクションに追加されます。By default, command bar items are added to the PrimaryCommands collection. これらのコマンドはコマンド バーに表示され、折りたたみモードと展開モードの両方で表示されます。These commands are shown in the command bar and are visible in both the collapsed and expanded modes. CommandBar とは異なり、プライマリ コマンドがセカンダリ コマンドに自動的にオーバーフローされることはなく、プライマリ コマンドは切り捨てられる可能性があります。Unlike CommandBar, primary commands do not automatically overflow to the secondary commands and might be truncated.

SecondaryCommands コレクションにコマンドを追加することもできます。You can also add commands to the SecondaryCommands collection. セカンダリ コマンドは、コントロールのメニューの部分に表示され、展開モードでのみ表示されます。Secondary commands are shown in the menu portion of the control and are visible only in the expanded mode.

アプリ バーのボタンApp bar buttons

PrimaryCommands と SecondaryCommands には、AppBarButtonAppBarToggleButtonAppBarSeparator の各コントロールを直接入力できます。You can populate the PrimaryCommands and SecondaryCommands directly with AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

アプリ バーのボタン コントロールは、アイコンとテキスト ラベルによって特徴付けられます。The app bar button controls are characterized by an icon and text label. これらのコントロールは、コマンド バーで使うように最適化されており、コマンド バーとオーバーフロー メニューのどちらに表示されるかに応じて外観が変化します。These controls are optimized for use in a command bar, and their appearance changes depending on whether the control is shown in the command bar or the overflow menu.

  • プライマリ コマンドとして使用されるアプリ バーのボタンは、アイコンだけがコマンド バーに表示されます。テキスト ラベルは表示されません。App bar buttons used as primary commands are shown in the command bar with only their icon; the text label is not shown. コマンドの説明テキストを表示するには、次に示すようにヒントを使用することをお勧めします。We recommend that you use a tooltip to show a text description of the command, as shown here.
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
    
  • セカンダリ コマンドとして使用されるアプリ バー ボタンは、ラベルとアイコンの両方がメニューに表示されます。App bar buttons used as secondary commands are shown in the menu, with both the label and icon visible.

その他のコンテンツOther content

他のコントロールを AppBarElementContainer にラップすることによって、コマンド バーのポップアップに追加できます。You can add other controls to a command bar flyout by wrapping them in an AppBarElementContainer. これにより、DropDownButtonSplitButton などのコントロールを追加したり、StackPanel のようなコンテナーを追加したりして、より複雑な UI を作成できます。This lets you add controls like DropDownButton or SplitButton, or add containers like StackPanel to create more complex UI.

コマンド バーのポップアップの、プライマリまたはセカンダリのコマンドのコレクションに要素を追加するには、要素で ICommandBarElement インターフェイスを実装する必要があります。In order to be added to the primary or secondary command collections of a command bar flyout, an element must implement the ICommandBarElement interface. AppBarElementContainer は、このインターフェイスを実装するラッパーです。これにより、要素自体にインターフェイスが実装されていない場合でも、コマンド バーに要素を追加できます。AppBarElementContainer is a wrapper that implements this interface so you can add an element to a command bar even if it doesn't implement the interface itself.

ここでは、AppBarElementContainer を使用してコマンド バーのポップアップに追加の要素を加えています。Here, an AppBarElementContainer is used to add extra elements to a command bar flyout. 色の選択を可能にするために、SplitButton がプライマリ コマンドに追加されます。A SplitButton is added to the primary commands to allow selection of colors. ズーム コントロールのより複雑なレイアウトを可能にするために、StackPanel がセカンダリ コマンドに追加されます。A StackPanel is added to the secondary commands to allow a more complex layout for zoom controls.

ヒント

既定では、アプリ キャンバス用に設計された要素は、コマンド バーで正しく表示されない可能性があります。By default, elements designed for the app canvas might not look right in a command bar. AppBarElementContainer を使用して要素を追加するときには、その要素を他のコマンド バー要素と一致させるために実行する必要がある、いくつかの手順があります。When you add an element using AppBarElementContainer, there are some steps you should take to make the element match other command bar elements:

  • 既定のブラシを lightweight styling でオーバーライドして、要素の背景と境界線をアプリ バーのボタンと一致させます。Override the default brushes with lightweight styling to make the element's background and border match the app bar buttons.
  • 要素のサイズと位置を調整します。Adjust the size and position of the element.
  • 16 ピクセルの Width と Height を持つ Viewbox にアイコンをラップします。Wrap icons in a Viewbox with a Width and Height of 16px.

注意

この例では、コマンド バーのポップアップ UI のみを示しています。示されているコマンドはどれも実装されていません。This example shows only the command bar flyout UI, it does not implement any of the commands that are shown. コマンドの実装の詳細については、「ボタン」およびコマンド設計の基本に関するページを参照してください。For more info about implementing the commands, see Buttons and Command design basics.

分割ボタンを使用したコマンド バーのポップアップ

開いた SplitButton を持つ折りたたまれたコマンド バーのポップアップA collapsed command bar flyout with an open SplitButton

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

メニューにカスタム ズーム UI が表示された、展開されたコマンド バーのポップアップAn expanded command bar flyout with custom zoom UI in the menu

<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>

セカンダリ コマンドのみを含むコンテキスト メニューの作成Create a context menu with secondary commands only

セカンダリ コマンドのみを含む CommandBarFlyout をコンテキスト メニューとして MenuFlyout の代わりに使用できます。You can use a CommandBarFlyout with only secondary commands as a context menu, in place of a MenuFlyout.

セカンダリ コマンドのみを含むコマンド バーのポップアップ

コンテキスト メニューとしてのコマンド バーのポップアップCommand bar flyout as a context menu

<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 と共に使用して、標準メニューを作成することもできます。You can also use a CommandBarFlyout with a DropDownButton to create a standard menu.

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

コマンド バーのポップアップでのドロップダウン ボタン メニューA drop down button menu in a command bar flyout

<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>

テキスト コントロール用のコマンド バーのポップアップCommand bar flyouts for text controls

TextCommandBarFlyout は、テキストを編集するためのコマンドを含む特殊なコマンド バーのポップアップです。The TextCommandBarFlyout is a specialized command bar flyout that contains commands for editing text. 各テキスト コントロールでは、コンテキスト メニュー (右クリック) として、またはテキストが選択されたときに、自動的に TextCommandBarFlyout が表示されます。Each text control shows the TextCommandBarFlyout automatically as a context menu (right-click), or when text is selected. テキスト コマンド バーのポップアップでは、テキストの選択に適応して、関連するコマンドのみが表示されます。The text command bar flyout adapts to the text selection to only show relevant commands.

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

テキスト選択時のテキスト コマンド バーのポップアップA text command bar flyout on text selection

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

展開されたテキスト コマンド バーのポップアップAn expanded text command bar flyout

使用可能なコマンドAvailable commands

次の表に、TextCommandBarFlyout に含まれているコマンドと、各コマンドがどのような場合に表示されるかを示します。This table shows the commands that are included in a TextCommandBarFlyout, and when they are shown.

コマンドCommand 表示される場合Shown...
BoldBold テキスト コントロールが読み取り専用でない場合 (RichEditBox のみ)。when the text control is not read-only (RichEditBox only).
ItalicItalic テキスト コントロールが読み取り専用でない場合 (RichEditBox のみ)。when the text control is not read-only (RichEditBox only).
UnderlineUnderline テキスト コントロールが読み取り専用でない場合 (RichEditBox のみ)。when the text control is not read-only (RichEditBox only).
ProofingProofing IsSpellCheckEnabled が true で、スペル ミスのテキストが選択されている場合。when IsSpellCheckEnabled is true and misspelled text is selected.
切り取りCut テキスト コントロールが読み取り専用ではなく、テキストが選択されている場合。when the text control is not read-only and text is selected.
コピーCopy テキストが選択されている場合。when text is selected.
PastePaste テキスト コントロールが読み取り専用ではなく、クリップボードが空でない場合。when the text control is not read-only and the clipboard has content.
元に戻すUndo 元に戻すことができるアクションがある場合。when there is an action that can be undone.
すべて選択Select all テキストを選択できる場合。when text can be selected.

カスタム テキスト コマンド バーのポップアップCustom text command bar flyouts

TextCommandBarFlyout はカスタマイズできず、各テキスト コントロールによって自動的に管理されます。TextCommandBarFlyout can't be customized, and is managed automatically by each text control. ただし、既定の TextCommandBarFlyout をカスタム コマンドで置き換えることができます。However, you can replace the default TextCommandBarFlyout with custom commands.

  • テキスト選択時に表示される既定の TextCommandBarFlyout を置き換えるために、カスタム CommandBarFlyout (またはその他の種類のポップアップ) を作成して、SelectionFlyout プロパティに割り当てることができます。To replace the default TextCommandBarFlyout that's shown on text selection, you can create a custom CommandBarFlyout (or other flyout type) and assign it to the SelectionFlyout property. SelectionFlyout を null に設定した場合、選択時にコマンドは表示されません。If you set SelectionFlyout to null, no commands are shown on selection.
  • コンテキスト メニューとして表示される既定の TextCommandBarFlyout を置き換えるには、カスタムの CommandBarFlyout (またはその他の種類のポップアップ) をテキスト コントロールの ContextFlyout プロパティに割り当てます。To replace the default TextCommandBarFlyout that's shown as the context menu, assign a custom CommandBarFlyout (or other flyout type) to the ContextFlyout property on a text control. ContextFlyout を null に設定すると、以前のバージョンのテキスト コントロールに表示されるメニュー ポップアップが、TextCommandBarFlyout の代わりに表示されます。If you set ContextFlyout to null, the menu flyout shown in previous versions of the text control is shown instead of the TextCommandBarFlyout.

サンプル コードを入手するGet the sample code