WPF 標準コントロールデモアプリ › ToolBar

ToolBar Menu

ToolBar はよく使うコマンドボタンやコントロールをツールバーに配置するコンテナコントロールです。表示しきれないアイテムはオーバーフローパネルに自動的に収容されます。ToolBarTray と組み合わせて複数のツールバーを管理できます。

概要

WPF の ToolBar は HeaderedItemsControl を継承したコントロールで、Button・CheckBox・ComboBox・Separator などのコントロールをツールバーとして配置します。ToolBarTray の子として複数の ToolBar を並べたり、重ねたりできます。

ToolBar の幅が不足してすべてのアイテムを表示できない場合、超過したアイテムはオーバーフロー（>>) ボタンを通じたドロップダウンパネルに自動的に移動します。ToolBar.OverflowMode 添付プロパティで各アイテムがオーバーフローに移動するかどうかを制御できます（Always/AsNeeded/Never）。

ToolBar 内のコントロールには、ToolBar 内にいることを示すスタイルが自動的に適用されます。Button はフラットな外観に、ComboBox は境界なしのコンパクトな外観になります。これは ToolBar リソースディクショナリのテンプレートによるものです。

ToolBar は WPF の DockPanel と組み合わせてアプリウィンドウの上部に配置するのが一般的なパターンです。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`IsOverflowOpen`	`bool`	プログラムからオーバーフローパネルを開閉したい場合（例：特定の操作後にオーバーフロー内のアイテムを案内する）に使用します。True にするとオーバーフローパネルが展開し、スペース不足で隠れているアイテムが表示されます。ToolBar の右端に表示される >> ボタンが押された状態と同じ効果があります。ToolBar に十分なスペースがある場合（全アイテムが表示されている場合）はオーバーフローボタン自体が非表示になるため、IsOverflowOpen=True にしても視覚的な変化がありません。
`Band / BandIndex (ToolBarTray)`	`int`	ToolBarTray 内に複数の ToolBar を複数行に配置したい場合に使用します。Band で行を指定し、BandIndex でその行内の表示順序を制御します。同じ Band の ToolBar は同じ行に並び、Band が異なると別の行として表示されます。ユーザーが ToolBar をドラッグして移動した場合にこれらの値が更新されます。ToolBarTray を使わずに単独で配置した場合は Band/BandIndex は無視され、ドラッグによる移動もできません。
`OverflowMode (ToolBar attached)`	`Always / AsNeeded / Never`	ToolBar のサイズに関わらず特定のアイテムを常に表示したい（Never）、または常にオーバーフローメニューに表示したい（Always）場合に設定します。保存・削除など重要なボタンには Never を設定して常にアクセスできるようにします。Never を設定したアイテムが多すぎると、ウィンドウを極端に狭めたときにアイテム同士が重なったり切れたりすることがあるため、使用は最小限にとどめてください。
`Orientation`	`Horizontal / Vertical`	縦置きのサイドバーや専用アプリのパレットツールバーのように垂直方向に並べたい場合に Vertical を使用します。Horizontal（デフォルト）ではアイテムが左から右に並び、Vertical ではアイテムが上から下に並びます。ToolBarTray と組み合わせる場合は ToolBarTray の Orientation と方向を合わせる必要があり、不一致だとレイアウトが崩れることがあります。

XAML 使用例

<DockPanel>
  <ToolBarTray DockPanel.Dock="Top">
    <ToolBar Band="0" BandIndex="0">
      <Button Command="ApplicationCommands.New"
              ToolTip="新規作成">
        <Image Source="/Icons/new.png" Width="16" />
      </Button>
      <Button Command="ApplicationCommands.Open"
              ToolTip="開く">
        <Image Source="/Icons/open.png" Width="16" />
      </Button>
      <Separator />
      <Button Command="{Binding SaveCommand}" ToolTip="保存">
        <Image Source="/Icons/save.png" Width="16" />
      </Button>
    </ToolBar>
    <ToolBar Band="0" BandIndex="1">
      <ToggleButton IsChecked="{Binding IsBold}" ToolTip="太字">
        <TextBlock Text="B" FontWeight="Bold" />
      </ToggleButton>
      <ComboBox ItemsSource="{Binding FontSizes}"
                SelectedItem="{Binding SelectedFontSize}"
                Width="60" />
    </ToolBar>
  </ToolBarTray>
</DockPanel>

主な使用例

アプリのメインツールバー — 保存・開く・印刷などの頻繁に使うコマンドをアイコンボタンで素早くアクセスできるようにします。
テキストエディタのフォーマットバー — 太字・斜体・下線・フォントサイズなどのテキスト書式設定ツールをツールバーに配置します。
図形描画ツールバー — 描画ツール（ペン・形状・塗りつぶしなど）の選択ボタンをツールバーに配置します。
ビューコントロールバー — ズームイン・アウト・フィット・グリッド表示などのビュー操作コントロールをまとめたツールバーに使用します。
フィルタリングバー — ComboBox や TextBox を ToolBar に配置してインラインフィルタリング UI を提供します。

ヒントとベストプラクティス

ToolTip を必ず設定する — ツールバーボタンはアイコンのみが多いため、ToolTip でコマンドの説明を必ず提供してアクセシビリティとユーザビリティを確保します。
Command バインドを使う — Click イベントより Command バインドを使い、CanExecute で有効/無効を自動制御します。
Separator でグループを区切る — ToolBar 内に Separator を配置すると縦の区切り線としてレンダリングされ、関連するツールボタンのグループを視覚的に整理できます。Menu の Separator と同様に使えます。
OverflowMode="Never" でオーバーフロー禁止 — ウィンドウが狭くなっても必ず表示しておく重要なボタンは ToolBar.OverflowMode="Never" を設定します。ただし Never の設定が多すぎるとウィンドウを極端に狭めた際にアイテムが重なることがあるため使用は最小限にしてください。
ToolBarTray でバンドを活用 — Band プロパティで複数行のツールバーを整理します。Band=0 と Band=1 で 2 行のツールバーを配置でき、ユーザーはドラッグで並び替えできます。
ToolBar の背景色オーバーライドに注意 — ToolBar にはハードコードされたグレー背景スタイルが適用されています。アプリのカラーテーマに合わせて背景色を変更するには、ControlTemplate を上書きするか Background プロパティを設定しても効かない場合があるため、Style で ToolBar の Background を明示的にオーバーライドしてください。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で ToolBar のソースコードを見る →