[WPFリボン プログラミング] 第4回 ～リボン インターフェイスを作る2つの方法～

  • Article

[WPFリボン プログラミング]
第4回 ～リボン インターフェイスを作る2つの方法～

[ リボン インターフェイスを作るには ]
Microsoft Ribbon for WPFを使用してリボン インターフェイスを開発する方法には、大きく2つの方法があります。
1つは、リボン用のプロジェクトを新しく作る方法です。Visual Studioで、新しいプロジェクトを作成するときに、リボン用のプロジェクトを選択します。
もう1つは、既存のアプリケーションにリボンインターフェイスを新たに実装する方法です。

[ リボン用プロジェクト ]
Microsoft Ribbon for WPFをインストールしたVisual Studio 2010を起動すると、リボン用のプロジェクトのテンプレートがインストールされています。
メニューから、[ファイル]-[新規作成]-[プロジェクト]を選択すると、下図のように[WPF Ribbon Application]というテンプレートが表示され、これを選択することによりリボンインターフェイスを実装できます。

新しくアプリケーションの開発を始めるときには、この方法が便利です。

[ 既存アプリケーションにリボンを実装 ]
既存のアプリケーションにリボンを実装するときは、少しコツがいります。
Microsoft Ribbon for WPFをインストールしているVisual Studio 2010で、既存のWPFのアプリケーションのプロジェクトを開いたとき、ツールボックスにこのようにリボンのコンポーネントが追加されています。

この中のRibbonコントロールをWPFデザイナー上にドラッグ アンド ドロップした場合は、下図のようになります。
ここでは、Ribbonコントロールを上端にくっつくように貼り付け、WidthプロパティをAuto、HorizontalAlignmentプロパティをStretchに変更しています。

このまま、このアプリケーションをビルドして実行すると、下図のようになります。

アプリケーションメニューの上に、少しスペースがあります。
このスペースは、クイックアクセスツールバーや、コンテキストタブセットを表示させるスペースなのです。
試しに、クイックアクセスツールバーとコンテキストタブセットをリボンに追加し、実行してみました。

このように、アプリケーションメニューの上のスペースに、クイックアクセスツールバーとコンテキストタブセットが表示されました。
これでは、ちょっとカッコ悪いですね。

WPFアプリケーションのデフォルトのクラスはWindowクラスです。
Windowクラスがリボンインターフェイスをサポートしていないため、このようにウィンドウのタイトルバーの部分に情報が表示されないのです。
タイトルバーにクイックアクセスツールバー等を表示させるには、既存のアプリケーションで使用しているWindowクラスを、リボンをサポートしているRibbonWindowクラスに変更します。
変更点は4点です。

まずはC#のファイルであるMainWindow.xaml.csを変更します。
RibbonWindowクラスは、Microsoft.Windows.Controls.Ribbonに含まれていますので、using Microsoft.Windows.Controls.Ribbon; を追加します。
そして、MainWindowクラスの継承元を、WindowクラスからRibbonWindowクラスに変更します。
下図の赤で囲った部分の2か所です。

次に、XAMLのファイルであるMainWindow.xamlを変更します。
こちらも、WindowクラスをRibbonWindowクラスに変更します。
まずは、最初の行のWindowを、プレフィックス付きのRibbonWindowに変更します。
→

最下行も、</my:RibbonWindow> に変更します。

これらの4か所を変更して実行すると、下図のようになります。
今度は、タイトルバーにクイックアクセスツールバーやコンテキストタブセットが表示されるようになりました。

既存のWPFアプリケーションにリボン インターフェイスを追加するときには、このようにRibbonWindowクラスを使用します。

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

[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つの方法～

マイクロソフト
田中達彦