CodeZine(コードジン)

特集ページ一覧

.NETでOffice 2007と同じ「リボンインターフェース」を持ったエディタを作る

PowerTools Ribbon for .NETのC1Ribbonコンポーネントを使ってアプリケーションにリボンバーを実装する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/12/14 14:00

Office 2007に導入された新しいツールバー「リボン」を見て、ぜひこの機能を自分のアプリケーションに組み込みたいと思った人は私だけではないでしょう。そこで、PowerTools Ribbon for .NETのC1Ribbonコンポーネントを使ってリボンバーをアプリケーションに実装します。

はじめに

 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がインストールされていることが必須条件です。

 Windows VistaでPowerTools Ribbon for .NETのサンプルをコンパイルしようとするとエラーが発生します。これは、Windows VistaのUAC(ユーザーアカウント制御)により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者として実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。

コンポーネントのインストール

 はじめて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」です。

「名前空間」が「C1.Win.C1Ribbon」で始まる名前空間のコンポーネント「C1Ribbon」と「C1StatusBar」を選択する
「名前空間」が「C1.Win.C1Ribbon」で始まる名前空間のコンポーネント「C1Ribbon」と「C1StatusBar」を選択する

C1Ribbonテンプレートを使う

 PowerTools Ribbon for .NETをVisual Studioにインストールすると、リボンを持ったフォームのテンプレートが自動的に組み込まれます。

 Visual Studioの新しいプロジェクトを作成する画面に、「C1Ribbonアプリケーション」というテンプレートが追加されているので、これを選んでプロジェクトを作成すると、C1RibbonとC1StatusBarコンポーネントが組み込まれたフォームを使用できます。

「C1Ribbonアプリケーション」テンプレートが追加されている
「C1Ribbonアプリケーション」テンプレートが追加されている

 この、C1Ribbonコンポーネントはデフォルトではリボンには1つのタブとグループが組み込まれているだけなので、使えるようにするにはタブを追加したりボタンやテキストボックスなどを組み込む必要があります。

テンプレートから作成されたフォームとリボン
 テンプレートから作成されたフォームとリボン

GUIの作成とC1Ribbonコンポーネントの設定 1

 GUIの作成は、フォームにRichTextBoxとOpenFileDialogコントロールを追加します。

 RichTextBoxコントロールは、Dockプロパティを「Fill」にし、HideSelectionプロパティをFalseにしておきます。こうすると、選択文字列からフォーカスが他のコントロールに移っても、選択した文字列は反転表示のままになります。

 OpenFileDialogコントロールは、FileNameプロパティを「*.txt」に、Filterプロパティを「*.txt|text」に設定します。

リボンの構成要素

 リボンを実装するには、リボンの構成要素とその名前を知らなければなりません。

 そこで、Excel 2007を例にリボンの構成について説明しておきます。

アプリケーションボタンとアプリケーションメニュー

 リボンの左上にある丸いボタンを「アプリケーションボタン」といい、このボタンを押すとアプリケーションメニューがドロップダウンして表示されます。アプリケーションメニューは3つのペインに分かれており、それぞれボタンやサブメニュー、区切り線などを組み込むことができます。

リボンの構成1-Excel 2007
リボンの構成1-Excel 2007

 リボンはTabPageコントロールのように「タブ」を持ち、このタブにボタンやエディット、コンボボックスなどのリボン専用のコントロールを組み込んで使用します。

 タブはいくつも組み込むことができ、ユーザーはタブをクリックしていろいろな機能を使うことができます。

リボンの構成2-Excel 2007
リボンの構成2-Excel 2007

タブの追加とアプリケーションメニューの作成

 では、C1Ribbonコンポーネントの作成を行います。

 まず、リボンのタブをもう1つ追加します。また、アプリケーションメニューに「ファイルを開く」と「終了」を設定します。

1.

 配置したC1Ribbonコンポーネントのアプリケーションボタンの横にある編集用メニューをクリックし、[アクション]ボタンをクリックしてドロップダウンリストから「タブの追加」を選びます。

 これで、リボンにタブが追加されます。

「タブの追加」を選ぶ
「タブの追加」を選ぶ

 タブは、タイトル文字をクリックすると直接文字の編集が行えます。

タイトル文字をクリックして編集する
タイトル文字をクリックして編集する

2.

 アプリケーションボタンをクリックして、[画像の変更]ボタンを押します。ダイアログが表示されるので、リストからボタンに表示するアイコンを選ぶことができます。独自の画像を組み込むなら、[インポート]ボタンで選択します。

リストからボタンに表示するアイコンを選ぶかインポートする
リストからボタンに表示するアイコンを選ぶかインポートする

3.

 アプリケーションボタンをクリックして、プロパティウィンドウの「BottomPaneItems」「LeftPaneItems」「RightPaneItems」プロパティで、アプリケーションメニューを設定します。

 これらは、それぞれコレクションエディタを使って追加します。

BottomPaneItems、LeftPaneItems、RightPaneItemsプロパティでアプリケーションメニューを設定
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]をダブルクリックしてイベントハンドラを作成します。

C#はプロパティウィンドウを使ってイベントハンドラを作成する
C#はプロパティウィンドウを使ってイベントハンドラを作成する

 このメニューでは、OpenFileDialogでファイルを開くダイアログを表示し、選択したテキストファイルをRichTextBoxコントロールのLoadFileメソッドで開くだけです。

 また、[終了]メニューは、プログラムを終了します。このメニューは、「ribbonButton2」オブジェクトになります。

Visual Basic
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
C#
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プロパティは、選択されている文字の色を設定するプロパティです。

Visual Basic
Private Sub RibbonColorPicker1_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles RibbonColorPicker1.Click
    Me.RichTextBox1.SelectionColor = RibbonColorPicker1.Color
End Sub
C#
private void ribbonColorPicker1_Click(object sender, EventArgs e)
{
    richTextBox1.SelectionColor = ribbonColorPicker1.Color;
}

 フォントサイズの変更のためのエディットボックスは、「RibbonEditBox」というオブジェクトになります。TextBoxコントロールと同じように入力データはTextプロパティに格納されます。

 ユーザーがこのコントロールにデータを入力すると、コントロールにはChangeCommittedイベントが発生します。

 ここでは、入力された文字サイズを整数値に変換して、新しいFontオブジェクトを作成してRichTextBoxコントロールのSelectionFontプロパティに設定します。

Visual Basic
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
C#
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プロパティに設定します。

Visual Basic
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
C#
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メソッドを実行しています。

Visual Basic
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
C#
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コンポーネントを使ってみてください。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5