[WPFリボン プログラミング] 第3回 ~リボンについて知っておくべきこと~

[WPFリボン プログラミング ] 第3回 ~リボンについて知っておくべきこと~

前回から少し時間が経ってしまいました。
昨年末、ほぼ毎日書いていたブログの更新頻度が低くなった理由は、共著で進めているSilverlightの書籍の執筆等があったためです。
リボンの連載も、ぼちぼち進めていきます。

[ リボンの各部品の名称 ]
リボンを構成する部品には、下図のように名称がついています。

リボンはタブ形式になっており、この図の例では[ホーム]、[表示]という名称のタブがあります。
これらのタブをクリックすると、その下に表示されているアイコン群が変わります。

タブの左端には、アプリケーションメニューがついています。
このアプリケーションメニューは、ファイルを保存したり、アプリケーションそのものを終了させたりするなど、アプリケーション全般に関係する機能が入ります。

タブの上には、クイックアクセスツールバーと呼ばれるアイコン群があります。
クイックアクセスツールバーに特定の機能を登録すると、そのアイコンをクリックするだけで機能を呼び出せます。
上書き保存やUndoなどのよく使う機能を登録しておきます。

上の図は、ホームという名前のタブが表示されている状態です。
ホームタブの中には、いろいろなアイコンが表示されています。
ここでは、[貼り付け]や[選択]などのアイコンが確認できます。
それらの下に、薄い字で[クリップボード]、[イメージ]、[ツール]、[図形]と書かれています。
これらをグループと呼び、同系列のアイコンを見やすいようにまとめることができます。
この例では、クリップボードのグループには貼り付け、切り取り、コピーといった、クリップボード関連のアイコンがまとまっています。

アプリケーションが持つ機能を大きくまとめて、タブに分けていきます。
そのときに、特定の場面でしか使わない機能群があることがあります。
そのようなときには、コンテキストタブと呼ばれるタブを作ることができます。
下図は、PowerPointでコンテキストタブを表示させた画面です。

この図の、[デザイン]と[レイアウト]タブは、PowerPointに貼り付けた表を選択しているときだけに表示されるタブです。
他のタブと違い、少し黄色っぽい色で表示されています。
[デザイン]、[レイアウト]と表示されている上には、黄色く[表ツール]と表示されています。
この[表ツール]と書かれたところを、コンテキストタブセットと呼びます。
コンテキストタブは、必ずコンテキストタブセットの下に表示されます。
1つのコンテキストタブセットに対して、複数のコンテキストタブを作ることができます。
特定の場面で表示させたいタブを、このようにコンテキストタブセットとして提供することにより、通常はタブを表示させずに、必要なときだけタブを表示させるということができるようになります。

[ リボンの表示幅を変えたときの見た目の変更 ]
リボンは、表示できる幅にあわせて見た目を変えさせることができます。
下図は、Windows 7に入っているペイントを起動し、ウィンドウの横幅を徐々に短くさせていったものです。

最初の図では、リボンの全ての要素が表示されています。

2番めの図では、クリップボードのグループにある[切り取り]と[コピー]の文字が消え、アイコンだけ表示されています。

3番めの図では、さらに[トリミング]等の文字が消えています。

さらに横幅を縮めた4番めの図では、クリップボードとイメージ、ブラシ、図形の各グループがそれぞれ1つのアイコンにまとまってしまいました。

最終的には、5番めの図のように、全てのグループが1つのアイコンで表示されています。

このようにウィンドウの横幅の変化に従って、どこのアイコンをどういう順番でどのように変化していくかを決めることができます。

次回からは、リボンの各要素の実装方法について説明します。

[WPFリボンの開発用コンポーネントのダウンロード先]
WPFリボンの開発は、Visual Studio 2010またはExpression Blend 4に、Microsoft Ribbon for WPFというコンポーネントを追加することによって開発できます。
以下のサイトからダウンロードすることができます。
https://www.microsoft.com/downloads/en/details.aspx?FamilyID=2bfc3187-74aa-4154-a670-76ef8bc2a0b4&displaylang=en

[WPFリボン プログラミング]
第1回 : ~リボン インターフェイスとは~
第2回 : ~開発環境を揃える~
第3回 : ~リボンについて知っておくべきこと~

マイクロソフト
田中達彦