環境: Visual Studio 2010 (RTM), Office 2010

Visual Studio 2010 & Office 2010 UI 開発新機能

• バックステージビュー (backstage)
• コンテキストメニュー (context menu)
• リボンの AutoScale
• リボンタブのプログラムコードによる選択 (アクティベート)

こんにちは。

これまた 3 分クッキングの簡単なお話です。

ここでも、第 1 回 で作成したプロジェクトをそのまま使用します。つまり、以下の点 (事前事項) に注意してください。

• リボン (XML) のアイテムを追加し、このリボン XML が有効になるように設定します
• 追加されたリボン XML の XML 名前空間が新しくなっていたことを思い出してください
• Test_onAction というハンドラ (メソッド) を作成しておきました。今回も、このハンドラをそのまま使います

Office のリボンは、ウィンドウの大きさにあわせて適切なサイズ、レイアウトに設定されます。(“いまさらそんな基本的なことを ! ?” と言われるかもしれませんが、この機能を理解するための予備知識として記載しておきます。)

これが、結構、私たちのようなデモをする人にとってはやっかいなときがあり、会社で動かしているときには大きなアイコンで出ていたものが、セミナーなどでスクリーンに出したときに、(解像度が変わることによって) 折りたたまれ、「あったはずの場所にない！」といったことになります。しかし、そんなあちこちでデモばかりやっているのは私達だけで、普通に Office を使っている方にとっては、そのサイズに応じた適切な状態でリボン上のコントロールが表示されるため、実は気づかないところでこの恩恵を受けているわけです。
昔ほど多くはないと思いますが、ご年配の上司の方や、身体上の理由などで 800 X 600 などの解像度の低い画面で仕事をされている方も居られるかもしれません。リボンは、こうした方にとっても支障なく機能が表示されるように設計されているわけで、業務アプリケーションなどを構築されている方にとっては、リボンのレイアウトは “大した問題” である場合があります。

リボンを XML を使って構造的に定義する背景としては、こうした点もあるわけです。つまり、リボンは、静的に位置を決めて描画するのではなく、その配置が構造的に決められ、実際どのように描画するかは Office が決めています。

さて、これまで、カスタムで追加したリボンのコントロールでは、このリサイズ、レイアウト変更の制御が不可能で、フルフルで表示されるか、全部折りたたまれるかのどちらかしか表示されませんでした。

実際に見てみましょう。例えば、第1回で作成したプロジェクトの Ribbon1.xml に以下の通り記述します。(一見長いですが、同じことを繰り返している超簡単なソースです。)

<?xml version="1.0" encoding="UTF-8"?><customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">  <ribbon>    <tabs>      <tab id="MyTab" label="リボンの騎士">        <group id="MyGroup1"               label="グループ1">          <button id="MyButton1_1"                  label="ボタン1-1"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton1_2"                  label="ボタン1-2"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton1_3"                  label="ボタン1-3"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>        </group>        <group id="MyGroup2"               label="グループ2">          <button id="MyButton2_1"                  label="ボタン2-1"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton2_2"                  label="ボタン2-2"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton2_3"                  label="ボタン2-3"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>        </group>        <group id="MyGroup3"               label="グループ3">          <button id="MyButton3_1"                  label="ボタン3-1"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton3_2"                  label="ボタン3-2"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>          <button id="MyButton3_3"                  label="ボタン3-3"                  imageMso="HappyFace"                  size="large"                  onAction="Test_onAction"/>        </group>      </tab>    </tabs>  </ribbon></customUI>

これで F5 ボタンを押してデバッグ実行すると、解像度の高い画面で、ウィンドウも充分に大きくしているなら、下図の通り表示されます。(かなり気持ち悪いですが、ちょっとだけご辛抱ください。)

そして、このウィンドウ (Excel) の横幅をぐいぐいと縮めていくと . . .

といった感じで、元の表示か、折りたたまれるかのいずれかの遷移で変化していきます。

Office 2007 以上をお使いの方はご存知の通り、Office が標準で持っているリボンは、良い感じでバランスよく変わっていきますね。これとは大違いです。

Office 2010 / Visual Studio 2010 からは、カスタムに追加したリボンでも、AutoScale プロパティを使用して、標準のリボンのように、オートスケーリング (Auto Scaling) されるグループと、そうでないグループ (上図のような遷移) を指定できます。

例えば、下記の太字のように、2 番目のグループに AutoScale を設定し、

<?xml version="1.0" encoding="UTF-8"?><customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">  <ribbon>    <tabs>      <tab id="MyTab" label="リボンの騎士">        <group id="MyGroup1"               label="グループ1">          . . . . .        </group>        <group id="MyGroup2"               label="グループ2"               autoScale="true">          . . . . .        </group>        <group id="MyGroup3"               label="グループ3">          . . . . .        </group>      </tab>    </tabs>  </ribbon></customUI>

F5 ボタンで実行して、ウィンドウをリサイズしていくと、下図のように遷移します。

次回は、これまで結構ニーズが多かった、アレです。