WebMatrix 2 の拡張機能を作成する (4) - リボン UI

前回から少し間が空いてしまいましたが、今回は一番拡張のし甲斐があると思われるリボン 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);

実行結果

WebMatrix で一番拡張しがいのあるリボン UI の説明はこれで終了です。次回はダッシュボードの拡張について説明したいと思います。お疲れ様でした。