[WPFリボン プログラミング] 第14回 ～キーチップ / グループ表示の優先順位～

  • Article

[WPFリボン プログラミング ]
第14回 ～キーチップ / グループ表示の優先順位～

[キーチップとは ]
キーチップ(Key Tip)は、リボン ユーザーインターフェイスをキーボードからの入力によって使う仕組みです。
下図はペイントでキーチップを表示させた例です。

キーチップを表示させるには、一度[Alt]キーを押すか、[Alt]キーを長めに押します。
図のように、アイコンやタブに重なるようにして、[1]、[2]、[3]、[F]、[H]、[V]という文字がキーチップとして表示されています。
この状態で[H]キーを押すと、[ホーム]タブのアイコンにキーチップが下図のように表示されます。

このようにキーチップを実装すると、マウスがなくてもキーボードだけを使用して操作できます。

[キーチップの実装 ]
キーチップの実装はとても簡単で、タブやボタンを定義している部分に、以下の赤い字の部分のように KeyTip="X" という情報を追加するだけです。

<my:RibbonTab Header="タブ1" KeyTip="T">
<my:RibbonGroup Header="グループ1">
<my:RibbonButton Command="Cut" Label="切り取り" KeyTip="X"/>
<my:RibbonButton Command="Copy" Label="コピー" KeyTip="C"/>
<my:RibbonButton Command="Paste" Label="貼り付け" KeyTip="V"/>

<my:RibbonButton Command="Close" Label="閉じる" KeyTip="L"/>
</my:RibbonGroup>

キーチップは2文字のキーを割りあてることもできます。
以下の図は、Wordでキーチップを表示させたときの図です。
最初の図は、ホームタブ上のアイコンにキーチップが表示されているところです。

次の図は、最初の図の状態で[F]キーを押したときの状態です。

キーチップに2文字を割りあてていると、このように最初の1文字を入力した段階で、その文字で始まるキーチップのみを表示します。
そして、もう1文字入力することにより、目的の命令を実行します。

[ グループ表示の優先順位 ]
リボン インターフェイスを実装したウィンドウを小さくしていくと、タブに表示されているグループの幅が徐々に小さくなります。
ペイントのホームタブを例に取ると、ウィンドウの幅が充分にあるときには、下図のように左から[クリップボード]、[イメージ]、[ツール]、[ブラシ]、[図形]というグループが表示されています。
この中で、[ブラシ]グループについては最初から縮小した形式で表示されています。

ウィンドウの幅を少しずつ狭くしていくと、徐々にグループごとにまとまっていくのがわかります。
最初に、[クリップボード]グループが小さくなります。

次に、[イメージ]グループが小さくなります。

次は少し飛んで、[図形]グループが小さくなります。

使用頻度が低いと思われるグループから小さくするようにすると、ウィンドウの大きさが小さいときでも良く使うグループを優先して表示できます。
グループ表示の優先順位を設定するには、RibbonGroupに名前を設定し、RibbonTabの定義の部分でGroupSizeReductionOrderを使用して優先順位を指定します。
以下の赤い字の部分が表示の優先順位を決めている部分、青い字の部分がRibbonGroupの名前を設定している部分です。

<my:RibbonTab Header="タブ1"
GroupSizeReductionOrder="Group2, Group4, Group3, Group5, Group1">
<my:RibbonGroup Header="グループ1" Name="Group1">
<my:RibbonButton Label="テストボタン"/>
</my:RibbonGroup>
<my:RibbonGroup Header="グループ2" Name="Group2">
<my:RibbonButton Label="テストボタン"/>
</my:RibbonGroup>
<my:RibbonGroup Header="グループ3" Name="Group3">
<my:RibbonButton Label="テストボタン"/>
</my:RibbonGroup>
<my:RibbonGroup Header="グループ4" Name="Group4">
<my:RibbonButton Label="テストボタン"/>
</my:RibbonGroup>
<my:RibbonGroup Header="グループ5" Name="Group5">
<my:RibbonButton Label="テストボタン"/>
</my:RibbonGroup>
</my:RibbonTab>

この例では、ウィンドウの幅を小さくしていくと、最初にGroup2が小さくなります。
その後は、Group4、Group3、Group5、Group1の順で小さくなります。

[最後に]
今回で、WPF Ribbonの連載を終了します。
リボン インターフェイスは、少しXAMLの構文を覚えるだけで実装できますので、既存のアプリケーションのインターフェイスとして追加できます。
もちろん、新しいアプリケーションを作成していくときにも、リボンの実装はそれほど難しくありません。
従来のメニューとツールバーを使用したインターフェイスと比較して、リボン インターフェイスの実装をぜひご検討ください。
最後までご購読いただき、ありがとうございました！

今後は、並行して連載しているWindows Phone 7のプログラミングの連載をぼちぼち続けながら、新たにタッチ対応アプリケーションの連載を始める予定です。

[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回 : ～リボンについて知っておくべきこと～
第4回 : ～リボン インターフェイスを作る2つの方法～
第5回 : ～タブとグループの作り方～
第6回 : ～グループへのコントロールの追加～
第7回 : ～ボタンをクリックしたときの処理と多彩なツールチップ～
第8回 : ～特定のときのみ表示させるコンテキスト タブ～
第9回 : ～アプリケーション メニュー～
第10回 : ～アプリケーション メニュー 上級編～
第11回 : ～コマンド ～
第12回 : ～クイック アクセス ツールバー～
第13回 : ～ギャラリー～
第14回 : ～キーチップ / グループ表示の優先順位～

マイクロソフト
田中達彦