SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

折りたたみ機能付きのツールバーを持った.NETアプリケーションの作成

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

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

 「ComponentOne Studio」に含まれるC1OutBarコンポーネントを使って、リッチテキストボックスの機能を操作できる折りたたみ式ツールバーを持ったアプリケーションを作成してみます。

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

はじめに

 前回に引き続き、ComponentOne Studioに同梱されているユーザーの操作を補助するコンポーネントを紹介します。

 今回紹介するのは、ツールバーのようにコマンドボタンのような機能を持っていながら、メニューのようにコマンドボタンをカテゴリわけし、しかもそのカテゴリを展開・縮小表示できるC1OutBarコントロールです。

 C1OutBarコントロールは、Outlookスタイルのコンテナ/タブコントロールで、C1OutPageタイプのページを複数持つことができます。

 各ページには、タイトルバーと空のページまたはツールバーボタンのようなコマンドのあるページがあり、ページタイトルまたはタイトルバーをクリックすると、そのページが表示され、残りのページが非表示になる、展開・縮小表示機能を持っています。

 このコントロールを使うことで、ツールバーのようにボタンをずらっと並べて表示するのではなく、コマンドをカテゴリごとに整理し使いたいカテゴリだけ表示でき、ユーザーの操作性の向上を図ることができます。

 そこで今回は、このC1OutBarコントロールを使いリッチテキストボックスの機能を操作できる折りたたみ式ツールバーを持ったアプリケーションを作成してみました。

フォームの左側に操作系統を複数のページに分けたツールバーを配置
フォームの左側に操作系統を複数のページに分けたツールバーを配置
ページを1つ開くと他のページが閉じる
ページを1つ開くと他のページが閉じる

対象読者

 Visual Basic 2010/2012/2013、またはVisual C# 2010/2012/2013を使ってプログラムを作ったことがある人。

必要な環境

 Visual Basic 2010/2012/2013、Visual C# 2010/2012/2013、Visual Studio 2010/2012/2013でプログラムが作れる環境。

 なお、本プログラムは次の環境で開発・動作確認を行っています。

  • OS:Windows 7
  • 開発Tool:Visual Studio 2010、.NET Framework 4

プログラム実行時の注意事項

 本稿の実行ファイル(バイナリファイル)を動かすには、zipファイルに同梱してある以下のファイルが必要になります(.NET Framework 4でのみご使用いただけます)。

ファイル名 説明
C1.Win.C1Command.4.dll 本体アセンブリ

 このファイルを、実行プログラムと同じフォルダに格納します。

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

 トライアル版は、グレープシティのWebページから申し込みできます。

 トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 ComponentOne Studioをインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Win.C1Command.4」の「C1OutBar」コントロールです。

アセンブリ名が「C1.Win.C1Command.4」の「C1OutBar」コントロールを選択する
アセンブリ名が「C1.Win.C1Command」の「C1OutBar」コントロールを選択する

 これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。.NET Framework 4が必要です。

ファイル 内容
C1.Win.C1Command.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.Win.C1Command.4.dll 本体アセンブリ

C1OutBarコントロールの概要

 C1OutBarコントロールは、Outlookスタイルのコンテナ/タブコントロールで、C1OutPageタイプのページを複数持ち、ページにはタイトルバーと空のページまたはツールバーボタンのようなコマンドのあるページが含まれます。

 各ページは折りたたみ・展開機能を持っており、ページタイトルまたはタイトルバーをクリックするとそのページが表示され、残りのページが非表示になります。

 ページは任意のコントロールを格納することができ、独自のツールバーを作成できます。

 また、あらかじめ用意されているC1ToolBarコントロールを使ってツールバーを作成することもできます。

主な特徴

 C1OutBarコントロールは次のような特徴を持っています。

アコーディオン風のアニメーション

 標準的なアコーディオンコントロールのような各ページの拡張/縮小動作を提供します。 拡張できるのは一度に1ページだけなので画面の表示領域が無駄になりません。

アコーディオン風のアニメーションでページが開く
ページは垂直に動作する
任意のコントロールの埋め込み

 TextBoxコントロールやグラフなど任意のコントロールを任意のページに埋め込むことができます。

ページに任意のコントロールを組み込める
ページにコントロールを組み込める
組み込みビジュアルスタイル

 Microsoft Officeカラースキームのすべてを含む12種の組み込みビジュアルスタイルから選択できます。

12種の組み込みビジュアルスタイル
12種の組み込みビジュアルスタイル
ページの非表示

 PageVisibleプロパティを使用して、任意のページを簡単に非表示にできます。

スマートスクロール

 C1OutBarコントロールとC1ToolBarコントロールを使用して、ツールバーコマンドのリストが長くなったときにスクロール機能を提供できます。C1OutBarコントロールは、選択したページの上下にスマートスクロールボタンを表示できます。

ページのレイアウトと配置

 C1OutBarコントロールは、上、下、左、右のいずれかにドッキングできます。

組み込みコマンド

 C1OutBarコントロールには、デフォルトでC1ToolBarコントロールが配置された1ページが含まれます。また、C1CommandHolderが自動的に作成されてコンポーネントのトレイに配置されます。

 C1ToolBarコントロールには、アイコンやコマンド名の付いたC1CommandLinkオブジェクトがあらかじめ用意されています。この機能を使うことで、よく使われる操作のコマンドリンクをすぐに作ることができます。

デフォルトで用意されているコマンドリンク
デフォルトで用意されているコマンドリンク

GUIの作成

 では、早速アプリケーションを作成してみましょう。

 アプリケーションは、C1OutBarコントロールとリッチテキストボックスコントロールを持ち、リッチテキストボックスコントロールの操作をC1OutBarコントロールのツールバーで行うものです。

 ツールバーは、組み込みのコマンドリンクを使用して作成しますので、アイコンファイルなどは必要ありません。

フォームのレイアウト
フォームのレイアウト

C1OutBarコントロールの作成

 フォームをデザインしていきます。

(1)フォームにC1OutBarコントロールをドラッグ&ドロップします。Dockプロパティを「Left」に設定し、Widthプロパティを「130」にします。

C1OutBarコントロールをフォームの左側に配置
C1OutBarコントロールをフォームの左側に配置

(2)RichTextBoxコントロールをC1OutBarコントロールの横にドラッグ&ドロップし、Dockプロパティを「Fill」に、BackColorプロパティを「Beige」に設定します。

RichTextBoxコントロールをC1OutBarコントロールの横に配置
RichTextBoxコントロールをC1OutBarコントロールの横に配置

(3)C1OutBarコントロールのスマートタグから「ツールバー付きページの追加」をクリックします。

「ツールバー付きページの追加」をクリック
「ツールバー付きページの追加」をクリック

(4)「ページ2」が追加されますので、もう一度スマートタグから「ツールバー付きページの追加」をクリックし、「ページ3」「ページ4」を追加します。

全部で4ページになる
全部で4ページになる

(5)もう一度C1OutBarコントロールのスマートタグをクリックし、「VisualStyle」のリストから「Office2003Olive」をクリックします。これで、C1OutBarコントロールにオリーブのグラデーションのデザインが適用されます。

「VisualStyle」のリストから「Office2003Olive」をクリック
「VisualStyle」のリストから「Office2003Olive」をクリック
 

(6)プロパティウィンドウのオブジェクトリストから「C1OutPage1」を選び、Textプロパティを「ファイル」に変更します。これで、ページのタイトルテキストが変更されます。

(7)「ページ1」のフローティングツールバーを表示し、「新規コマンドリンク/コマンドの追加」をクリックします。

「新規コマンドリンク/コマンドの追加」をクリック
「新規コマンドリンク/コマンドの追加」をクリック

(8)「コマンドにリンクする」ダイアログボックスが表示されますので、「標準コマンド」リストから「新規作成(&N)」をクリックします。

「標準コマンド」リストから「新規作成(&N)」をクリック
「標準コマンド」リストから「新規作成(&N)」をクリック

(9)OKボタンをクリックすると、このコマンドリンクが「ファイル」ページに表示されます。このリンクにはすでにアイコンが組み込まれており、アプリケーションを実行するとボタンのように動作します。

 標準コマンドを組み込むのであれば、たったこれだけの操作でツールバーが作成できます。

 フローティングツールバーはページごとに表示されますので、カテゴリごとにいろいろな標準コマンドをページに配置できます。

「ファイル」ページに「新規作成(&N)」が表示された
ページ1に「新規作成(&N)」が表示された

(10)同様の手順で、以下のようにすべてのページタイトルとコマンドを作成します。

 なお、他のページを開く場合は、ページのタイトルをクリックします。

ファイル
    新規作成(&N)
    開く(&O)
    閉じる(&C)
    上書き保存(&S)
    名前を付けて保存(&A)
    すべてを保存(&L)
    印刷(&P)
    終了(&X)

編集
    切り取り(&T)
    コピー(&C)
    貼り付け(&P)
    削除(&D)
    元に戻す(&U)

フォント
    太字
    斜体
    下線
    取り消し線

書式
    左揃え
    中央揃え
    右揃え
    両端揃え
4ページにタイトルとコマンドリンクを設定する
4ページにタイトルとコマンドリンクを設定する

 これで出来上がりです。アプリケーションを実行し、ページ切り替えとコマンドリンクが動作することを確認します。

 コマンドリンクには、ツールチップも設定されています。

アプリケーションを実行し動作を確認する
アプリケーションを実行し動作を確認する

GUIの作成(2)

コマンドリンクの処理

 作成した各ページのコマンドリンクに実行処理を組み込むには、各コマンドリンクのc1CommandオブジェクトのClickイベントハンドラを使用します。

 フォームデザイナ上で処理を組み込みたいコマンドリンクを一度クリックします。プロパティウィンドウのオブジェクトが「c1CommandLink」に切り変わります。その状態でもう一度コマンドリンクをクリックするとオブジェクトが「c1Command」に切り替わりますので、プロパティウィンドウをイベントに切り替え、Clickイベントをダブルクリックすると、Clickイベントハンドラが作成されます。

「c1CommandLink-c1Command」に切り替え、
Clickイベントをダブルクリックしてイベントハンドラを作成する
「c1CommandLink-c1Command」に切り替え、Clickイベントをダブルクリックしてイベントハンドラを作成する

 あとは、このイベントハンドラに処理を作成します。

 ここでは動作確認のため、とりあえず「新規作成」と「開く」コマンドリンクに、メッセージボックスを表示する処理を組み込みました。

Visual Basic
Public Class Form1

    Private Sub c1Command1_Click(sender As System.Object, e As C1.Win.C1Command.ClickEventArgs) Handles c1Command1.Click
        MessageBox.Show("新規作成")
    End Sub

 
    Private Sub c1Command2_Click(sender As System.Object, e As C1.Win.C1Command.ClickEventArgs) Handles c1Command2.Click
        MessageBox.Show("開く")
    End Sub

    Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        RichTextBox1.LoadFile(Application.StartupPath + "\test.rtf", RichTextBoxStreamType.RichText)
    End Sub
End Class
C#
namespace C1Outbar_winform_cs
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void c1Command1_Click(object sender, C1.Win.C1Command.ClickEventArgs e)
        {
            MessageBox.Show("新規作成");
        }

        private void c1Command2_Click(object sender, C1.Win.C1Command.ClickEventArgs e)
        {
            MessageBox.Show("開く");
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            richTextBox1.LoadFile(Application.StartupPath + "/test.rtf", RichTextBoxStreamType.RichText);
        }
    }
}

 以上で出来上がりです。「新規作成」と「開く」コマンドリンクをクリックすると、メッセージボックスが表示されます。

メッセージボックスが表示されればOK
メッセージボックスが表示されればOK

まとめ

 もともと操作体系を統一するために導入されたメニューやツールバーですが、アプリケーションのGUI上の個性がなくなり、パソコンの普及とともに登場したアプリケーションに不慣れな人には、ツールバーのボタンが何の記号なのかよく分からない、という事態を招いています。

 C1OutBarコントロールは、アイコンとテキストでコマンド操作を表示し、かつページを折りたたむことで余計な操作を隠してくれるので、より分かりやすい操作系の導入とフォームの有効活用という、相反するような課題を解決してくれます。

この記事は参考になりましたか?

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

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7841 2014/06/17 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング