コマンド バーCommand bar

コマンド バーを使うと、ユーザーはアプリの最も一般的なタスクに簡単にアクセスできます。Command bars provide users with easy access to your app's most common tasks. コマンド バーを使うと、アプリ レベルまたはページに固有のコマンドにアクセスできます。これは、ナビゲーション パターンと共に使用することもできます。Command bars can provide access to app-level or page-specific commands and can be used with any navigation pattern.

重要な API:CommandBar クラスAppBarButton クラスAppBarToggleButton クラスAppBarSeparator クラスImportant APIs: CommandBar class, AppBarButton class, AppBarToggleButton class, AppBarSeparator class

アイコンを含むコマンド バーの例

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

CommandBar コントロールは、汎用的で柔軟、軽量なコントロールです。画像やテキスト ブロックなどの複雑なコンテンツも、AppBarButtonAppBarToggleButtonAppBarSeparator コントロールなどの単純なコマンドも表示できます。The CommandBar control is a general-purpose, flexible, light-weight control that can display both complex content, such as images or text blocks, as well as simple commands such as AppBarButton, AppBarToggleButton, and AppBarSeparator controls.

注意

XAML では、AppBar コントロールと CommandBar コントロールの両方が提供されます。XAML provides both the AppBar control and the CommandBar control. AppBar を使うユニバーサル Windows 8 アプリをアップグレードする場合にのみ、AppBar を使ってください。また、変更は最小限に抑える必要があります。You should use the AppBar only when you are upgrading a Universal Windows 8 app that uses the AppBar, and need to minimize changes. Windows 10 の新しいアプリでは、代わりに CommandBar コントロールを使うことをお勧めします。For new apps in Windows 10, we recommend using the CommandBar control instead. このドキュメントでは、CommandBar コントロールを使うことを前提としています。This document assumes you are using the CommandBar control.

Examples

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

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

Microsoft フォト アプリの展開されたコマンド バーです。An expanded command bar in the Microsoft Photos app.

Microsoft フォト アプリのコマンドバー

Windows Phone の Outlook カレンダーのコマンド バーです。A command bar in the Outlook Calendar on Windows Phone.

Outlook カレンダー アプリのコマンド バー

構造Anatomy

既定では、コマンド バーには、一連のアイコン ボタンとオプションの [その他] ボタン (省略記号の [•••]) が表示されます。By default, the command bar shows a row of icon buttons and an optional "see more" button, which is represented by an ellipsis [•••]. 後で示すコード例を使って作成されたコマンド バーを次に示します。Here's the command bar created by the example code shown later. コマンド バーは、閉じたコンパクトな状態で表示されます。It's shown in its closed compact state.

閉じたコマンド バー

コマンド バーは、次のように、閉じた最小の状態で表示することもできます。The command bar can also be shown in a closed minimal state that looks like this. 詳しくは、「開いた状態と閉じた状態」をご覧ください。See the Open and closed states section for more info.

閉じたコマンド バー

同じコマンド バーが開いている状態を次に示します。Here's the same command bar in its open state. ラベルは、コントロールのメイン部分を識別します。The labels identify the main parts of the control.

閉じたコマンド バー

コマンド バーは、4 つの主な領域に分かれています。The command bar is divided into 4 main areas:

  • コンテンツ領域はバーの左側に配置されます。The content area is aligned to the left side of the bar. これは、Content プロパティが指定されている場合に表示されます。It is shown if the Content property is populated.
  • 基本コマンド領域はバーの右側に配置されます。The primary command area is aligned to the right side of the bar. これは、PrimaryCommands プロパティが指定されている場合に表示されます。It is shown if the PrimaryCommands property is populated.
  • [その他] ([•••]) ボタンはバーの右側に表示されます。The "see more" [•••] button is shown on the right of the bar. [その他] ([•••]) ボタンを押すと、プライマリ コマンドのラベルが表示され、セカンダリ コマンドが存在する場合はオーバーフロー メニューが開きます。Pressing the "see more" [•••] button reveals primary command labels and opens the overflow menu if there are secondary commands. このボタンは、プライマリ コマンド ラベルもセカンダリ ラベルもない場合には表示されません。The button will not be visible when no primary command labels or secondary labels are present. 既定の動作を変更するには、OverflowButtonVisibility プロパティを使います。To change default behavior, use the OverflowButtonVisibility property.
  • オーバーフロー メニューは、コマンド バーが開いていて、SecondaryCommands プロパティが指定されている場合にのみ表示されます。The overflow menu is shown only when the command bar is open and the SecondaryCommands property is populated. スペースが限られている場合に、プライマリ コマンドは SecondaryCommands 領域に移動されます。When space is limited, primary commands will move into the SecondaryCommands area. 既定の動作を変更するには、IsDynamicOverflowEnabled プロパティを使います。To change default behavior, use the IsDynamicOverflowEnabled property.

FlowDirectionRightToLeft のときは、レイアウトが逆になります。The layout is reversed when the FlowDirection is RightToLeft.

コマンド バーの作成Create a command bar

次の例では、上に示したコマンド バーが作成されます。This example creates the command bar shown previously.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

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

CommandBar コントロールには、PrimaryCommandsSecondaryCommandsContent の 3 つのプロパティがあり、コマンドとコンテンツを追加するために使うことができます。The CommandBar control has 3 properties you can use to add commands and content: PrimaryCommands, SecondaryCommands, and Content.

コマンドCommands

既定では、コマンド バーの項目は PrimaryCommands コレクションに追加されます。By default, command bar items are added to the PrimaryCommands collection. 最も重要なコマンドを常に表示できるように、重要度順にコマンドを追加する必要があります。You should add commands in order of their importance so that the most important commands are always visible. ユーザーによるアプリ ウィンドウのサイズ変更などでコマンド バーの幅が変化した場合、プライマリ コマンドはブレークポイントを境としてコマンド バーとオーバーフロー メニューの間を動的に移動します。When the command bar width changes, such as when users resize their app window, primary commands dynamically move between the command bar and the overflow menu at breakpoints. この既定の動作を変更するには、IsDynamicOverflowEnabled プロパティを使います。To change this default behavior, use the IsDynamicOverflowEnabled property.

最小画面 (幅 320 epx) には、最大 4 つのプライマリ コマンドを、コマンド バーに配置できます。On the smallest screens (320 epx width), a maximum of 4 primary commands fit in the command bar.

SecondaryCommands コレクションにコマンドを追加することもできます。これらは、オーバーフロー メニューに表示されます。You can also add commands to the SecondaryCommands collection, which are shown in the overflow menu.

[その他] 領域とアイコンがあるコマンド バーの例

必要に応じて、プログラムを使って PrimaryCommands と SecondaryCommands の間でコマンドを移動できます。You can programmatically move commands between the PrimaryCommands and SecondaryCommands as needed.

  • 複数のページで一貫して表示されるコマンドがある場合は、一貫した場所にそのコマンドを配置することをお勧めします。If there is a command that would appear consistently across pages, it's best to keep that command in a consistent location.
  • また、[Accept] (承諾)、[Yes] (はい)、[OK] (OK) コマンドは、[Reject] (拒否)、[No] (いいえ)、[Cancel] (キャンセル) コマンドの左に配置することをお勧めします。一貫性があることで、ユーザーは安心してシステム内を移動でき、アプリのナビゲーションに関する知識をさまざまなアプリで利用することができます。We recommended placing Accept, Yes, and OK commands to the left of Reject, No, and Cancel. Consistency gives users the confidence to move around the system and helps them transfer their knowledge of app navigation from app to app.

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

PrimaryCommands と SecondaryCommands には、どちらも AppBarButtonAppBarToggleButtonAppBarSeparator の各コマンド要素のみを入力できます。Both the PrimaryCommands and SecondaryCommands can be populated only with AppBarButton, AppBarToggleButton, and AppBarSeparator command elements.

アプリ バーのボタン コントロールは、アイコンとテキスト ラベルによって特徴付けられます。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 used in the command bar or the overflow menu.

オーバーフロー メニューのアイコンのサイズは 16 x 16 ピクセルで、基本コマンド領域のアイコン (20 x 20 ピクセル) よりも小さくなります。The size of the icons in the overflow menu is 16x16px, which is smaller than the icons in the primary command area (which are 20x20px). SymbolIcon、FontIcon、または PathIcon を使うと、コマンドがセカンダリ コマンド領域に表示されるときに、忠実さを失うことなく、適切なサイズに自動的に調整されます。If you use SymbolIcon, FontIcon, or PathIcon, the icon will automatically scale to the correct size with no loss of fidelity when the command enters the secondary command area.

ボタンのラベルButton labels

AppBarButton IsCompact プロパティはラベルが表示されるかどうかを決定します。The AppBarButton IsCompact property determines whether the label is shown. CommandBar コントロールで、コマンド バーの開閉に応じてコマンド バーがボタンの IsCompact プロパティを自動的に上書きします。In a CommandBar control, the command bar overwrites the button's IsCompact property automatically as the command bar is opened and closed.

アプリ バー ボタンのラベルを配置するには、CommandBar の DefaultLabelPosition プロパティを使用します。To position app bar button labels, use CommandBar's DefaultLabelPosition property.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle"/>
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat"/>
</CommandBar>

ラベルが右に配置されたコマンド バー

比較的大きなウィンドウの場合は、ラベルを見やすくするためにアプリ バーのボタン アイコンの右に移動することを検討します。On larger windows, consider moving labels to the right of app bar button icons to improve legibility. ラベルを下に配置すると、コマンド バーを開かないとラベルが見えませんが、ラベルを右に配置すると、コマンド バーが閉じていてもラベルが見えます。Labels on the bottom require users to open the command bar to reveal labels, while labels on the right are visible even when command bar is closed.

オーバーフロー メニューで、ラベルは既定ではアイコンの右側に配置され、LabelPosition は無視されます。In overflow menus, labels are positioned to the right of icons by default, and LabelPosition is ignored. スタイルを調整するには、CommandBarOverflowPresenterStyle プロパティを、CommandBarOverflowPresenter をターゲットにする Style に設定します。You can adjust the styling by setting the CommandBarOverflowPresenterStyle property to a Style that targets the CommandBarOverflowPresenter.

ボタンのラベルは、短く、可能であれば 1 つの単語にすることをお勧めします。Button labels should be short, preferably a single word. アイコンの下の長いラベルは複数の行に折り返されるため、開いたコマンド バーの全体的な高さが増します。Longer labels below an icon will wrap to multiple lines, increasing the overall height of the opened command bar. ラベルのテキストにソフト ハイフン文字 (0x00AD) を含めると、テキストの中で単語を分割する位置を示すことができます。You can include a soft-hyphen character (0x00AD) in the text for a label to hint at the character boundary where a word break should occur. XAML でこの処理を行うには、次のようなエスケープ シーケンスを使います。In XAML, you express this using an escape sequence, like this:

<AppBarButton Icon="Back" Label="Areally&#x00AD;longlabel"/>

指定した場所でラベルが折り返されると、次のようになります。When the label wraps at the hinted location, it looks like this.

ラベルが折り返されたアプリ バーのボタン

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

コマンドは論理的にグループ化することを検討します。たとえば、[返信]、[全員に返信]、[転送] を [応答] メニューに配置します。Consider logical groupings for the commands, such as placing Reply, Reply All, and Forward in a Respond menu. 通常、アプリ バー ボタンは単一のコマンドをアクティブ化しますが、アプリ バー ボタンを使用して、カスタム コンテンツを持つ MenuFlyout または Flyout を表示できます。While typically an app bar button activates a single command, an app bar button can be used to show a MenuFlyout or Flyout with custom content.

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

その他のコンテンツOther content

XAML 要素をコンテンツ領域に追加するには、Content プロパティを設定します。You can add any XAML elements to the content area by setting the Content property. 複数の要素を追加する場合は、それらの要素をパネル コンテナーに配置し、パネルを Content プロパティの唯一の子にする必要があります。If you want to add more than one element, you need to place them in a panel container and make the panel the single child of the Content property.

動的オーバーフローが有効になっている場合は、プライマリ コマンドがオーバーフロー メニューに移動するため、コンテンツはクリップされません。When dynamic overflow is enabled, content will not clip because primary commands can move into the overflow menu. それ以外の場合は、プライマリ コマンドが優先されるため、コンテンツがクリップされる可能性があります。Otherwise, primary commands take precedence and may cause the content to be clipped.

ClosedDisplayModeCompact の場合、コンパクト サイズのコマンド バーよりも大きいコンテンツはクリップされる可能性があります。When the ClosedDisplayMode is Compact, the content can be clipped if it is larger than the compact size of the command bar. UI の一部がクリップされないようにするには、コンテンツ領域で UI の各部分を表示または非表示にするように OpeningClosed の各イベントを処理する必要があります。You should handle the Opening and Closed events to show or hide parts of the UI in the content area so that they aren't clipped. 詳しくは、「開いた状態と閉じた状態」をご覧ください。See the Open and closed states section for more info.

開いた状態と閉じた状態Open and closed states

コマンド バーは、開いたり閉じたりできます。The command bar can be open or closed. 開いているときは、テキスト ラベル付きのプライマリ コマンド ボタンが表示され、(セカンダリ コマンドが存在する場合は) オーバーフロー メニューが開きます。When it's open, it shows primary command buttons with text labels and it opens the overflow menu (if there are secondary commands). コマンドバーはオーバーフロー メニューを上方向 (プライマリ コマンドの上) または下方向 (プライマリ コマンドの下) に開きます。The command bar opens the overflow menu upwards (above the primary commands) or downwards (below the primary commands). 既定の方向は上方向ですが、オーバーフロー メニューを開くための十分な領域が上方向にない場合、コマンド バーはこれを下方向に開きます。The default direction is up, but if there's not enough space to open the overflow menu upwards, the command bar opens it downwards.

ユーザーは、[その他] ([•••]) ボタンを押してこれらの状態を切り替えることができます。A user can switch between these states by pressing the "see more" [•••] button. プログラムで切り替えるには、IsOpen プロパティを設定します。You can switch between them programmatically by setting the IsOpen property.

OpeningOpenedClosingClosed の各イベントを使うと、コマンド バーの開閉に対応できます。You can use the Opening, Opened, Closing, and Closed events to respond to the command bar being opened or closed.

  • Opening イベントと Closing イベントが発生するのは、切り替えアニメーションの開始前です。The Opening and Closing events occur before the transition animation begins.
  • Opened イベントと Closed イベントが発生するのは、切り替えの完了後です。The Opened and Closed events occur after the transition completes.

次の例では、Opening イベントと Closing イベントを使ってコマンド バーの不透明度を変更します。In this example, the Opening and Closing events are used to change the opacity of the command bar. コマンド バーが閉じているときは、アプリの背景が見えるようにコマンド バーが半透明になります。When the command bar is closed, it's semi-transparent so the app background shows through. コマンド バーが開いているときは、ユーザーがコマンドに集中できるようにコマンド バーが不透明になります。When the command bar is opened, the command bar is made opaque so the user can focus on the commands.

<CommandBar Opening="CommandBar_Opening"
            Closing="CommandBar_Closing">
    <AppBarButton Icon="Accept" Label="Accept"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Cancel" Label="Cancel"/>
</CommandBar>
private void CommandBar_Opening(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 1.0;
}

private void CommandBar_Closing(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 0.5;
}

IsStickyIsSticky

コマンド バーが開いているときにユーザーがアプリの他の部分とやり取りすると、コマンド バーは自動的に閉じます。If a user interacts with other parts of an app when a command bar is open, then the command bar will automatically close. これは簡易非表示と呼ばれます。This is called light dismiss. 簡易非表示動作を制御するには、IsSticky プロパティを設定します。You can control light dismiss behavior by setting the IsSticky property. IsSticky="true" の場合、ユーザーが [その他] ([•••]) ボタンを押すか、オーバーフロー メニューから項目を選ぶまで、バーは開いたままになります。When IsSticky="true", the bar remains open until the user presses the "see more" [•••] button or selects an item from the overflow menu.

固定のコマンド バーは、簡易非表示およびキーボード フォーカスというユーザーが期待する動作と一致しないため、使わないようにすることをお勧めします。We recommend avoiding sticky command bars because they don't conform to users' expectations for light dismiss and keyboard focus behavior.

表示モードDisplay Mode

コマンド バーが閉じた状態でどのように表示されるか制御するには、ClosedDisplayMode プロパティを設定します。You can control how the command bar is shown in its closed state by setting the ClosedDisplayMode property. 3 つのクローズド表示モードから選ぶことができます。There are 3 closed display modes to choose from:

  • コンパクト:既定のモード。Compact: The default mode. コンテンツ、プライマリ コマンドのアイコン (ラベルなし)、[その他] ([•••]) ボタンが表示されます。Shows content, primary command icons without labels, and the "see more" [•••] button.
  • 最小:[その他] ([•••]) ボタンとして機能する細いバーのみが表示されます。Minimal: Shows only a thin bar that acts as the "see more" [•••] button. ユーザーはバーの任意の場所を押してバーを開くことができます。The user can press anywhere on the bar to open it.
  • 非表示:コマンド バーを閉じたとき、コマンド バーは表示されません。Hidden: The command bar is not shown when it's closed. このモードは、インライン コマンド バーでコンテキスト依存コマンドを表示するときに便利な場合があります。This can be useful for showing contextual commands with an inline command bar. この場合は、コマンド バーをプログラムで開く必要があります。この操作を行うには、IsOpen プロパティを設定するか、ClosedDisplayMode を Minimal または Compact に変更します。In this case, you must open the command bar programmatically by setting the IsOpen property or changing the ClosedDisplayMode to Minimal or Compact.

以下では、コマンド バーを使って RichEditBox に単純な書式設定コマンドを保持しています。Here, a command bar is used to hold simple formatting commands for a RichEditBox. 編集ボックスにフォーカスがないときには、書式設定コマンドが煩わしくないように非表示にします。When the edit box doesn't have focus, the formatting commands can be distracting, so they're hidden. 編集ボックスを使っているときは、コマンド バーの ClosedDisplayMode を Compact に変更して書式設定コマンドを表示します。When the edit box is being used, the command bar's ClosedDisplayMode is changed to Compact so the formatting commands are visible.

<StackPanel Width="300"
            GotFocus="EditStackPanel_GotFocus"
            LostFocus="EditStackPanel_LostFocus">
    <CommandBar x:Name="FormattingCommandBar" ClosedDisplayMode="Hidden">
        <AppBarButton Icon="Bold" Label="Bold" ToolTipService.ToolTip="Bold"/>
        <AppBarButton Icon="Italic" Label="Italic" ToolTipService.ToolTip="Italic"/>
        <AppBarButton Icon="Underline" Label="Underline" ToolTipService.ToolTip="Underline"/>
    </CommandBar>
    <RichEditBox Height="200"/>
</StackPanel>
private void EditStackPanel_GotFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

private void EditStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;
}

  この例では編集コマンドの実装については取り上げません。Note  The implementation of the editing commands is beyond the scope of this example. 詳しくは、「RichEditBox」をご覧ください。For more info, see the RichEditBox article.

Minimal モードと Hidden モードが役に立つ場合もありますが、すべてのアクションを非表示にするとユーザーが混乱する可能性があることに注意してください。Although the Minimal and Hidden modes are useful in some situations, keep in mind that hiding all actions could confuse users.

ClosedDisplayMode を変更してユーザーにヒントを表示すると、周囲にある要素のレイアウトが影響を受けます。Changing the ClosedDisplayMode to provide more or less of a hint to the user affects the layout of surrounding elements. これに対し、CommandBar の開閉を切り替えても他の要素のレイアウトには影響しません。In contrast, when the CommandBar transitions between closed and open, it does not affect the layout of other elements.

配置Placement

コマンド バーは、アプリ ウィンドウの上部、アプリ ウィンドウの下部、またはインラインに配置できます。Command bars can be placed at the top of the app window, at the bottom of the app window, and inline.

アプリ バーの配置の例 1

  • 小型の携帯デバイスでは、コマンド バーを画面の下部に配置して、操作しやすくことをお勧めします。For small handheld devices, we recommend positioning command bars at the bottom of the screen for easy reachability.
  • 大きな画面を持つデバイスでは、では、コマンド バーは、ウィンドウの上端近くに配置して、気付きやすくします。For devices with larger screens, placing command bars near the top of the window makes them more noticeable and discoverable.

物理的な画面サイズを調べるには、DiagonalSizeInInches API を使います。Use the DiagonalSizeInInches API to determine physical screen size.

コマンド バーは、単一ビュー画面 (左側の例) と複数ビュー画面 (右側の例) の次の画面領域に配置できます。Command bars can be placed in the following screen regions on single-view screens (left example) and on multi-view screens (right example). インラインのコマンド バーは、アクション領域の任意の場所に配置できます。Inline command bars can be placed anywhere in the action space.

アプリ バーの配置の例 2

タッチ デバイス:タッチ キーボード、つまりソフト入力パネル (SIP) が表示されているときに、コマンド バーをユーザーに対して表示したままにする必要がある場合、コマンド バーをページの BottomAppBar プロパティに割り当てると、SIP の表示中はコマンド バーが移動して表示されたままになります。Touch devices: If the command bar must remain visible to a user when the touch keyboard, or Soft Input Panel (SIP), appears then you can assign the command bar to the BottomAppBar property of a Page and it will move to remain visible when the SIP is present. それ以外の場合は、コマンド バーをインラインおよびアプリのコンテンツに対して相対的に配置します。Otherwise, you should place the command bar inline and positioned relative to your app content.

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