はじめに
Microsoft 2007 Office System（以下、Office 2007）に導入された新しいツールバー「リボン」を見て、ぜひこの機能を自分のアプリケーションに組み込みたいと思った人は私だけではないでしょう。
Visual Studio 2005のコントロールには、このような機能のものがありませんが、PowerTools Ribbon for .NETのC1Ribbonコンポーネントを使うことでリボンインターフェースを実現することができます。そこで、RichTextBoxコントロールを使って、リボンツールバーを持ったテキストエディタを作ってみました。
対象読者
Visual Basic 2005またはVisual C# 2005を使ってプログラムを作ったことのある人。
必要な環境
Visual Basic 2005またはVisual C# 2005、Visual Studio 2005でプログラムが作れる環境。
なお、本プログラムはWindows Vista上で動作するVisual Studioを使用して作成し動作確認を行っています。
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下の2つのファイルが必要になります。
- C1.Win.C1Ribbon.2.dll…C1Ribbonコンポーネント（.NET Framework 2.0 用）
これらのファイルを、実行プログラムと同じフォルダに格納します。 .NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。
コンポーネントのインストール
はじめてPowerTools Ribbon for .NETを使用する方は、プロジェクトにComponentOne Studio 2007 WinForms Editionをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の［ダウンロード］－［トライアル版］をクリックし、ダウンロード方法（［FTP］または［HTTP］）を選択すれば入手できます。ファイルはLZH形式で圧縮されています。
有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
PowerTools Ribbon for .NETをインストールしたら、ツールボックスに専用のタブを作成し、PowerTools Ribbon for .NETコンポーネントを追加します。追加するコンポーネントは、「.NET Frameworkコンポーネント」の「名前空間」が「C1.Win.C1Ribbon」で始まる名前空間のコンポーネント「C1Ribbon」と「C1StatusBar」です。
C1Ribbonテンプレートを使う
PowerTools Ribbon for .NETをVisual Studioにインストールすると、リボンを持ったフォームのテンプレートが自動的に組み込まれます。
Visual Studioの新しいプロジェクトを作成する画面に、「C1Ribbonアプリケーション」というテンプレートが追加されているので、これを選んでプロジェクトを作成すると、C1RibbonとC1StatusBarコンポーネントが組み込まれたフォームを使用できます。
この、C1Ribbonコンポーネントはデフォルトではリボンには1つのタブとグループが組み込まれているだけなので、使えるようにするにはタブを追加したりボタンやテキストボックスなどを組み込む必要があります。
GUIの作成とC1Ribbonコンポーネントの設定 1
GUIの作成は、フォームにRichTextBoxとOpenFileDialogコントロールを追加します。
RichTextBoxコントロールは、Dockプロパティを「Fill」にし、HideSelectionプロパティをFalseにしておきます。こうすると、選択文字列からフォーカスが他のコントロールに移っても、選択した文字列は反転表示のままになります。
OpenFileDialogコントロールは、FileNameプロパティを「*.txt」に、Filterプロパティを「*.txt|text」に設定します。
リボンの構成要素
リボンを実装するには、リボンの構成要素とその名前を知らなければなりません。
そこで、Excel 2007を例にリボンの構成について説明しておきます。
アプリケーションボタンとアプリケーションメニュー
リボンの左上にある丸いボタンを「アプリケーションボタン」といい、このボタンを押すとアプリケーションメニューがドロップダウンして表示されます。アプリケーションメニューは3つのペインに分かれており、それぞれボタンやサブメニュー、区切り線などを組み込むことができます。
リボンはTabPageコントロールのように「タブ」を持ち、このタブにボタンやエディット、コンボボックスなどのリボン専用のコントロールを組み込んで使用します。
タブはいくつも組み込むことができ、ユーザーはタブをクリックしていろいろな機能を使うことができます。
タブの追加とアプリケーションメニューの作成
では、C1Ribbonコンポーネントの作成を行います。
まず、リボンのタブをもう1つ追加します。また、アプリケーションメニューに「ファイルを開く」と「終了」を設定します。
1．
配置したC1Ribbonコンポーネントのアプリケーションボタンの横にある編集用メニューをクリックし、［アクション］ボタンをクリックしてドロップダウンリストから「タブの追加」を選びます。
これで、リボンにタブが追加されます。
タブは、タイトル文字をクリックすると直接文字の編集が行えます。
2．
アプリケーションボタンをクリックして、［画像の変更］ボタンを押します。ダイアログが表示されるので、リストからボタンに表示するアイコンを選ぶことができます。独自の画像を組み込むなら、［インポート］ボタンで選択します。
3．
アプリケーションボタンをクリックして、プロパティウィンドウの「BottomPaneItems」「LeftPaneItems」「RightPaneItems」プロパティで、アプリケーションメニューを設定します。
これらは、それぞれコレクションエディタを使って追加します。
コレクションエディタでは、［追加］ボタンの横にある▼をクリックして、リストから追加するアイテムを選びます。
ここでは「RibbonButton」と「RibbonSeparator」を組み込んでいます。RibbonButtonは、「RibbonButton」というオブジェクトとして操作します。
コレクションエディタのプロパティウィンドウでは、各オブジェクトのアイコンやテキストの配置位置などを設定してデザインします。
ただし、どのように出来上がったのかは、実際にプログラムを実行させアプリケーションメニューを表示しないとわかりません。
GUIの作成とC1Ribbonコンポーネントの設定 2
タブの作成
今度は、タブにコマンドを実行するコントロールを追加します。このプログラムに組み込んだコントロールの、すべてのコントロールの組み込み手順を説明しているときりがありませんので、ボタンを組み込む方法を例に紹介します。後は、同じような方法で行えます。
1．
タブには、1つだけ「Group」が組み込まれています。Visual Studioのコントロールで言う「GroupBox」と同じ働きで、コントロール群を機能ごとにまとめたり整理するのに使用します。デフォルトでタイトルが「Group」になっているので、これをクリックして「ホーム」に変更します。
なお、C1RibbonコンポーネントではすべてのコントロールでTextプロパティをフォームデザイナ上で編集できる「インライン編集」機能を持っています。
2．
グループをクリックすると編集用のツールバーが表示されるので、「アクション」から「ボタンの追加」を選びます。
このように、組み込みたいコントロールは、すべてここから選びます。
3．
追加されたボタンは、「RibbonButton」オブジェクトとしてプロパティウィンドウで各設定を行うことができます。
画像の設定では、アプリケーションメニューと同じように、リストからアイコンを選ぶか［インポート］ボタンで他のイメージファイルを使用できます。
ボタンの文字を画像の横か下のどちらに配置するのかは、TextImageRelationプロパティで設定します。
ここでは、［編集］タブに［コピー］［貼り付け］ボタンを、［ホーム］タブにフォントの色を選ぶカラーピッカーと、文字サイズを入力するエディットボックス、フォントを選ぶフォントコンボボックスを配置しています。
カラーピッカーは色を選ぶダイアログボックスを表示する機能が組み込まれており、フォントコンボボックスはコンピュータにインストールされているフォントの一覧を自動的に作成する機能が組み込まれているので、配置するだけですぐにこれらの機能を使うことができます。
各コマンドの処理の作成
リボンの作成ができたら、各コマンドに処理を実装していきます。
ファイルを開く処理
アプリケーションメニューの［ファイルを開く］がクリックされた時の処理を作成します。このメニューは「RibbonButton1」というオブジェクトになっています。
ただし、このアプリケーションメニューは、フォームデザイナ上では一切表示されないので、Visual Basicではコードウィンドウの「オブジェクト」「イベント」リストからそれぞれ「RibbonButton1」「Click」を選んで作成します。
C#では、プロパティウィンドウの［イベント］ボタンを押して、「オブジェクト」リストから「ribbonButton1」を選んで、［Click］をダブルクリックしてイベントハンドラを作成します。
このメニューでは、OpenFileDialogでファイルを開くダイアログを表示し、選択したテキストファイルをRichTextBoxコントロールのLoadFileメソッドで開くだけです。
また、［終了］メニューは、プログラムを終了します。このメニューは、「ribbonButton2」オブジェクトになります。
Public Class RibbonForm1 Public fsize As Integer = 10 Private Sub RibbonButton1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles RibbonButton1.Click Dim fname As String Dim ret As Integer ret = Me.OpenFileDialog1.ShowDialog If DialogResult.OK Then fname = Me.OpenFileDialog1.FileName If fname <> "" Then Me.RichTextBox1.LoadFile(fname, _ RichTextBoxStreamType.PlainText) End If End If End Sub Private Sub RibbonButton2_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles RibbonButton2.Click Me.Close() End Sub
namespace myribbon { public partial class RibbonForm1 : C1.Win.C1Ribbon.C1RibbonForm { public int fsize=10; public RibbonForm1() { InitializeComponent(); } private void ribbonButton1_Click(object sender, EventArgs e) { String fname; DialogResult ret; ret = openFileDialog1.ShowDialog(); if(ret == DialogResult.OK){ fname = openFileDialog1.FileName; if(fname != ""){ richTextBox1.LoadFile(fname, RichTextBoxStreamType.PlainText); } } } private void ribbonButton2_Click(object sender, EventArgs e) { this.Close(); }
フォントの属性設定の処理
次に、「ホーム」タブの3つのコントロールの処理を作成します。
カラーピッカーは、「RibbonColorPicker」というオブジェクトになります。ユーザーが色を選択すると、このコントロールの「Color」プロパティに色情報が格納されるので、RichTextBoxコントロールのSelectionColorプロパティに代入します。SelectionColorプロパティは、選択されている文字の色を設定するプロパティです。
Private Sub RibbonColorPicker1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles RibbonColorPicker1.Click Me.RichTextBox1.SelectionColor = RibbonColorPicker1.Color End Sub
private void ribbonColorPicker1_Click(object sender, EventArgs e) { richTextBox1.SelectionColor = ribbonColorPicker1.Color; }
フォントサイズの変更のためのエディットボックスは、「RibbonEditBox」というオブジェクトになります。TextBoxコントロールと同じように入力データはTextプロパティに格納されます。
ユーザーがこのコントロールにデータを入力すると、コントロールにはChangeCommittedイベントが発生します。
ここでは、入力された文字サイズを整数値に変換して、新しいFontオブジェクトを作成してRichTextBoxコントロールのSelectionFontプロパティに設定します。
Private Sub RibbonEditBox1_ChangeCommitted(_ ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles RibbonEditBox1.ChangeCommitted fsize = Convert.ToInt32(RibbonEditBox1.Text) Dim fontname As String = RibbonFontComboBox1.Text Dim fnt As Font = New Font(fontname, fsize, FontStyle.Regular) Me.RichTextBox1.SelectionFont = fnt End Sub
private void ribbonEditBox1_ChangeCommitted(object sender, EventArgs e) { fsize = Convert.ToInt32(ribbonEditBox1.Text); string fontname = ribbonFontComboBox1.Text; Font fnt = new Font(fontname, fsize, FontStyle.Regular); richTextBox1.SelectionFont = fnt; }
フォントの種類を選ぶコンボボックスは、「RibbonFontComboBox」というオブジェクトになります。ユーザーがリストから項目を選ぶと、「SelectedIndexChanged」イベントが発生し、選択項目名はTextプロパティに格納されます。
ここでは、選択されたフォント名から新しいFontオブジェクトを作成して、RichTextBoxコントロールのSelectionFontプロパティに設定します。
Private Sub RibbonFontComboBox1_SelectedIndexChanged(_ ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles RibbonFontComboBox1.SelectedIndexChanged Dim fontname As String = RibbonFontComboBox1.Text Dim fnt As Font = New Font(fontname, fsize, FontStyle.Regular) Me.RichTextBox1.SelectionFont = fnt End Sub
private void ribbonFontComboBox1_SelectedIndexChanged(object sender, EventArgs e) { string fontname = ribbonFontComboBox1.Text; Font fnt = new Font(fontname, fsize, FontStyle.Regular); richTextBox1.SelectionFont = fnt; }
編集タブのコピー・貼り付けボタンの処理
［編集］タブのコピー・貼り付けボタンは、それぞれ「RibbonButton3」「RibbonButton4」というオブジェクト名になります。
アプリケーションメニューのボタンから連番で番号が振られてそれぞれ違うオブジェクト名で識別されていますが、オブジェクトとしては同じ「RibbonButton」オブジェクトです。ユーザーがクリックするとClickイベントが発生します。
ここでは、RichTextBoxコントロールのCopy・Pasteメソッドを実行しています。
Private Sub RibbonButton3_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles RibbonButton3.Click Me.RichTextBox1.Copy() End Sub Private Sub RibbonButton4_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles RibbonButton4.Click Me.RichTextBox1.Paste() End Sub
private void ribbonButton3_Click(object sender, EventArgs e) { richTextBox1.Copy(); } private void ribbonButton4_Click(object sender, EventArgs e) { richTextBox1.Paste(); }
以上でできあがりです。
まとめ
MicrosoftがOffice 2007で導入した新しいGUIのリボンは、Windows VistaのGUIと合わせてこれまでにない外観をプログラムに実装できます。
この新しいGUIをプログラムに実装したいと思っている方は、ぜひPowerTools Ribbon for .NETのC1Ribbonコンポーネントを使ってみてください。
