前回から少し間が空いてしまいましたが、今回は一番拡張のし甲斐があると思われるリボン UI について説明を行いたいと思います。
基本的にリボン UI は ExtensionBase に用意されている RibbonItemsCollection コレクションに項目を追加するだけですが、非常に種類が多いので種類ごとに説明をしたいと思います。
ボタン
まずは RibbonButton クラスを使ってボタンを追加してみます。
これはボタン以外にも言えることですが WebMatrix のリボン UI では、ユーザーがクリックなどで選択した時のイベントを ICommand インターフェースを使って通知するようになってます。そのため、テンプレートにもデフォルトで DelegateCommand が追加されています。
C#
// smallImage, largeImage は 16x16, 32x32 の BitmapImage var ribbonButton = new RibbonButton( "Button", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ); RibbonItemsCollection.Add(ribbonButton);
今回は必要ないので null を指定していますが、ICommand を使っているので当然ながら CommandParameter を指定することもできます。
トグルボタン
RibbonToggleButton クラスを使ってトグルボタンを追加します。
トグルボタンというのは電灯のスイッチみたいに On/Off が交互に切り替わるやつです。チェックボックスに近いものと考えてください。
C#
var ribbonToggleButton = new RibbonToggleButton( "ToggleButton", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ); RibbonItemsCollection.Add(ribbonToggleButton);
グループ
RibbonGroup クラスを使ってグループを追加します。
今は ExtensionBase のコンストラクタに渡した時の名前でグループが作成されていますが、それ以外にも複数の新しいグループを作ることが可能です。
C#
var ribbonGroup = new RibbonGroup( "Group", new[] { new RibbonButton( "Button", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ) } ); RibbonItemsCollection.Add(ribbonGroup);
スプリットボタン
RibbonSplitButton クラスを使ってスプリットボタンを追加します。
スプリットボタンというのはボタンの下部分をクリックすると、さらに別のメニュー項目が表示されるタイプのボタンです。Office などでも貼り付けコマンドで利用されているやつです。
C#
var ribbonSplitButton = new RibbonSplitButton( "SplitButton", new DelegateCommand(HandleRibbonButtonInvoke), null, new[] { new RibbonButton( "Button", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ) }, smallImage, largeImage ); RibbonItemsCollection.Add(ribbonSplitButton);
メニューボタン
RibbonMenuButton クラスを使ってメニューボタンを追加します。
メニューボタンは見た目はスプリットボタンとあまり変わらないですが、ボタンとしての機能は持っていないので引数にデリゲートは指定できなくなっています。
C#
var ribbonMenuButton = new RibbonMenuButton( "MenuButton", new[] { new RibbonButton( "Button", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ), }, smallImage, largeImage ); RibbonItemsCollection.Add(ribbonMenuButton);
スプリットボタンギャラリー
RibbonSplitButtonGallery クラスと RibbonGalleryCategory クラスを使ってスプリットボタンギャラリーを追加します。
NuGet や Extension などのようなドロップダウンするインターフェースを簡単に実装することが出来ますが、見た目の調整にはデータテンプレートを使う必要があります。
C#
var ribbonGalleryCategory = new RibbonGalleryCategory("Header"); ribbonGalleryCategory.Items.Add("Item 1"); ribbonGalleryCategory.Items.Add("Item 2"); ribbonGalleryCategory.Items.Add("Item 3"); var ribbonSplitButtonGallery = new RibbonSplitButtonGallery( "Gallery", new DelegateCommand(HandleRibbonButtonInvoke), null, new DelegateCommand(HandleRibbonButtonInvoke), new[] { ribbonGalleryCategory }, smallImage, largeImage ); RibbonItemsCollection.Add(ribbonSplitButtonGallery);
コンテキストタブ
RibbonContextualTab クラスを使ってコンテキストタブを追加します。
リボン UI の特徴の一つとして、現在の操作内容によってタブが表示される機能がありますが、このクラスを使うと簡単に実装できます。しかし、操作している内容での切り替えは手動での出し分けが必要です。
C#
var ribbonContextualTab = new RibbonContextualTab( "NewTab", new[] { new RibbonGroup( "Group", new[] { new RibbonButton( "Button", new DelegateCommand(HandleRibbonButtonInvoke), null, smallImage, largeImage ) } ) } ); RibbonItemsCollection.Add(ribbonContextualTab);