■ 初めてのユーザーコントロールの作成 ■ 作成したクラスは他のプログラムで再利用出来る為、同じコードを何度も繰り返し作成する必要が無い。 コントロールも、複数のプロジェクトで再利用出来るクラスで有る。同じユーザーインターフェイスを 何度も繰り返してデザインすると謂う経験は、恐らく誰でも有る。例えば、姓と名を入力する為の TextBox コントロールを追加した後で、両方を組み合わせてフルネームを作成するコードを追加する等 の作業で有る。然うした余分な手間を省く事が出来れば楽に成る。 其の様な場合には、ユーザーコントロールを利用出来る。ユーザーコントロールとは、可視のオブジェ クトを作成する為のクラスだと考える事が出来る。詰まり、Visual Basic 2005 に標準装備されて居る コントロールと同様に再利用出来る独自のカスタムコントロールで有る。大半のユーザーコントロール は複合コントロールで有る。詰まり、1 つ、又は、複数の Visual Basic 2005 標準コントロールで構成 されるコントロールで有る。 以降の資料では、他のプログラムで再利用出来る複合ユーザーコントロールを作成する方法を説明する。 ■ ユーザーコントロールデザイナに付いて ■ 此の資料では、ユーザーコントロールデザイナを使用して独自のコントロールを作成する方法に付いて 説明する。 ユーザーコントロールとは、画面に表示されるクラスに過ぎない。ユーザーコントロールは、Visual Basic 2005 に用意されて居る標準コントロールと全く同様に、デザイン時にフォーム上に配置出来、プ ログラムの実行時に表示される。 プログラムをデザインする時に、コントロールを配置して其の見た目を決定する場所がフォームデザイ ナで有る。亦、ユーザーコントロール用のデザイナも有る。其れがユーザーコントロールデザイナで有 る。開発者は、此れを使用して、コントロールの見た目を決定出来る。 ■ ユーザーコントロールの作成 ユーザーコントロールは、他のクラスと似て居るが、ツールボックスに配置出来、フォーム上に表示出 来ると謂う追加的な機能を持つ。クラスモジュールにはコードしか無いのに対し、ユーザーコントロー ルモジュールにはコードとデザイナの両方が有る。ユーザーコントロールデザイナは、フォームデザイ ナと似て居り、ユーザーコントロールの外観と動作を制御する為のプロパティを持つ。 ユーザーコントロールを作成する方法は、使用して居るVisual Basic のバージョンに依り多少異なる。 Visual Basic 2005 の場合は、Windows コントロールライブラリと謂うプロジェクトの種類が有るのに 対し、Visual Basic Express Edition の場合は、先ず、クラスライブラリプロジェクトを作成してから、 ユーザーコントロールテンプレートを追加する必要が有る。
■ 遣って観よう
Visual Basic Express Edition を使用してユーザーコントロールを作成するには
１．[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックする。
U
２．[新しいプロジェクト] ダイアログボックスの [テンプレート] ペインで、[クラスライブラリ] をク リックし、[OK] をクリックする。 ３．[プロジェクト] メニューの [ユーザーコントロールの追加] をクリックする。 ４．[新しい項目の追加] ダイアログボックスで、[ユーザーコントロール] をクリックする。 ５．[ファイル名] ボックスに「NamesControl」と入力し、[追加] をクリックする。 新しいユーザーコントロールテンプレートがプロジェクトに追加され、ユーザーコントロールデザ イナが開く。 ６．ソリューションエクスプローラで、Class1.vb を右クリックし、[削除] をクリックして、[OK] を クリックする。 ７．[ファイル] メニューの [総てを保存] をクリックする。 ８．[プロジェクトの保存] ダイアログボックスで、「NamesUserControl」と入力し、[保存] をクリッ クする。 Visual Studio 2005 を使用してユーザーコントロールを作成するには １．[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックする。 ２．[新しいプロジェクト] ダイアログボックスの [テンプレート] ペインで、[Windows コントロール ライブラリ] をクリックする。 ３．[プロジェクト名] ボックスに「NamesControl」と入力し、[OK] をクリックする。 新しいユーザーコントロールテンプレートがプロジェクトに追加され、ユーザーコントロールデザ イナが開く。 ４．[ファイル] メニューの [総てを保存] をクリックする。 ５．[プロジェクトの保存] ダイアログボックスで、「NamesUserControl」と入力し、[保存] をクリッ クする。 ■ ユーザーコントロールへのコントロールの追加 ■ 此の資料では、コントロールを追加して複合ユーザーコントロールを作成する方法を説明する。 ■ ユーザーコントロールのデザイン 先にも述べた様に、ユーザーコントロールの大多数が複合コントロール、詰まり、1 つ以上の標準 Windows フォームコントロールを組み合わせたコントロールで有る。コントロールは、フォームをデ ザインする場合と同様、ツールボックスからユーザーコントロールデザイナにドラッグする事に依って、 ユーザーコントロールテンプレートに追加出来る。 コントロールを追加したら、デザイナでサイズ変更や移動を行ったり、[プロパティ] ウィンドウでプロ パティを設定したり出来る。 例えば、Label コントロールを追加してフルネームを表示し、3 つの TextBox コントロールを追加して
ファーストネーム、ラストネーム、及び、ミドルネームを表示する事が可能で有る。 ■ 遣って観よう ユーザーコントロールにコントロールを追加するには １．前の項で作成した NamesUserControl プロジェクトを開く。プロジェクトを保存しなかった場合 は、先ず、前の項「ユーザーコントロールデザイナに付いて」に戻って、其の項の手順を完了する 必要が有る。 ２．ソリューションエクスプローラのNamesControl.vb をクリックし、[表示] メニューの [デザイナ] をクリックする。 ３．ツールボックスから、デザイナにLabel コントロールをドラッグする。 ヒント：ウィンドウを開いた儘に仕て居る場合は、ツールボックスを使用する方が簡単で有る。此 れは、押しピンの様に表示されて居る [自動的に隠す] アイコンをクリックする事で実行出来る。 ４．[プロパティ] ウィンドウで、Name プロパティを FullName に変更する。 ５．ツールボックスから、デザイナに 3 つの Textbox コントロールをドラッグする。コントロールを 好きな位置に配置して良い。 ６．[プロパティ] ウィンドウで、Name プロパティを FirstName、MiddleName、及び、LastName に変更する。 ７．[ファイル] メニューの [総てを保存] をクリックして変更を保存する。 ■ ユーザーコントロールへのコードの追加 ■ 此の資料では、ユーザーコントロールにコードを追加して、フルネームの表示と新しいプロパティの公 開を行う方法に付いて説明する。 ユーザーコントロールにも、標準コントロールと同じ様に、プロパティ、メソッド、及び、イベントが 有る。コントロールのイベントを処理するコードの記述や、コントロールのユーザーに何のプロパティ を公開するかの判断は、コントロールの開発者が行う。 ■ ユーザーコントロールのイベント処理 ユーザーコントロールの利便性を高める為には、コントロールのイベントを処理するコードを記述する 必要が有る。ユーザーコントロールのイベント処理プロシージャを記述するのは、フォームやコントロ ールのイベント処理プロシージャを記述するのと変わらない。 此の例では、TextChanged イベントハンドラを使用して、FirstName、MiddleName、及び、LastName の各ボックスへの入力時に、其の内容でFullName ラベルを更新するイベントプロシージャを記述する。 ■ 遣って観よう ユーザーコントロールにコードを追加するには １．前の項で作成した NamesUserControl プロジェクトを開く。プロジェクトを保存しなかった場合 は、先ず、前の項「ユーザーコントロールデザイナに付いて」に戻って、其の項の手順を完了する
必要が有る。
２．ソリューションエクスプローラのNamesControl.vb をクリックし、[表示] メニューの [コード] を クリックする。
３．コード エディタで、FirstName_TextChanged イベントハンドラに次のコードを追加する。 Private Sub FirstName_TextChanged( _
ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles FirstName.TextChanged, MiddleName.TextChanged, LastName.TextChanged ' 3 個のテキストボックスの内容をラベルに表示
FullName.Text = FirstName.Text & " " & MiddleName.Text & " " & LastName.Text End Sub ４．F5 キーを押してプログラムを実行する。[ユーザーコントロールテストコンテナ] が開き、ユーザ ーコントロールが表示される。 ５．名、ミドルネーム、及び、姓を3 つのテキストボックスに入力する。入力時に、FullName ラベル に名前が表示される。 上で入力したコードを見ると、宣言の Handles 句に依り、3 つの TextBox コントロール総ての TextChanged イベントが処理される事が解る。何のテキストボックスを最初に入力した場合でも、入力 に合わせてFullName ラベルが常に更新される。 ■ ユーザーコントロールのプロパティの公開 標準コントロールでは、コントロールのデザイン時と実行時にプロパティの値を設定・取得出来る。ユ ーザーコントロールでも、プロパティを利用出来る様にする必要が有る。然うすると、デザイン時に [プ ロパティ] ウィンドウで設定出来、コードでも参照出来る様に成る。 ユーザーコントロールのプロパティを公開するのは、クラスのプロパティを公開するのと非常に良く似 て居る。大きな違いは、ユーザーコントロールに含まれて居るコントロールのプロパティも公開出来る と謂う点で有る。クラスと同様に、プロパティを宣言し、Get プロシージャと Set プロシージャにコー ドを追加する。ユーザーコントロールの中に含まれて居るコントロールのプロパティを公開する場合、 其の値を格納する為のプライベート変数を宣言する必要は無い。其のコントロールのプロパティが格納 する。 現時点では、FirstName、MiddleName、及び、LastName の各コントロールに入力されて居るテキス トやFullName ラベルの値を取得する方法は用意して居ない。コントロールの利便性を高める為には、 此等の値をプロパティとして公開する必要が有る。FullName ラベルの値は、外部のコードから変更出 来ない様、読み取り専用のプロパティと仕て公開する必要が有る。 ■ 遣って観よう プロパティを追加するには １．コードエディタで、FirstName、MiddleName、及び、LastName の各値をプロパティと仕て公開 する次のコードを追加する。
Property FirstNameText( ) As String Get
End Get
Set(ByVal value As String) FirstName.Text = value End Set
End Property
Property MiddleNameText( ) As String Get
Return MiddleName.Text End Get
Set(ByVal value As String) MiddleName.Text = value End Set
End Property
Property LastNameText( ) As String Get
Return LastName.Text End Get
Set(ByVal value As String) LastName.Text = value End Set
End Property
２．FullName ラベルの値を読み取り専用プロパティと仕て公開する次のコードを追加する。 ReadOnly Property FullNameText( ) As String
Get Return FullName.Text End Get End Property ３．F5 キーを押してプログラムを実行する。 ４．[ユーザーコントロールテストコンテナ] で、[プロパティ] グリッドの一番下にスクロールし、 FirstNameText プロパティを選択する。名前を入力し、FullNameText プロパティを選択する。 FirstName テキストボックスに名前が表示され、FullNameText プロパティと一致する。 他のプロパティの幾つかを、[プロパティ] グリッドとコントロール自体の両方で変更して観て、両 者の関係を確認する。此れは、此のコントロールのユーザーがデザイン時に経験する事と同じで有 る。 ５．[ファイル] メニューの [総てを保存] をクリックして変更を保存する。 ■ ユーザーコントロールのテスト ■ 此の資料では、ユーザーコントロールを他のプロジェクトでテストして実行時の動作を確認する方法に 付いて説明する。 ■ 実行時の動作 ユーザーコントロールが完成し、テストコンテナでデザイン時の動作をテストしたら、プログラムで使 用した時の動作を確認する必要が有る。Visual Basic 2005 では、Windows アプリケーションプロジェ クトを追加する事に依り、ユーザーコントロールを簡単にテスト出来る。
ユーザーコントロールは、ツールボックスに自動的に表示される。然して、他のコントロールの場合と 同様にフォームに追加して、プロパティを設定出来る。 ■ 遣って観よう ユーザーコントロールをテストするには １．前の項で作成した NamesUserControl プロジェクトを開く。プロジェクトを保存しなかった場合 は、先ず、前の項「ユーザーコントロールへのコードの追加」に戻って、其の項の手順を完了する 必要が有る。 ２．[ファイル] メニューの [追加] をポイントし、[新しいプロジェクト] をクリックする。 ３．[新しいプロジェクトの追加] ダイアログボックスで、[Windows アプリケーション] をクリックす る。 ４．[プロジェクト名] ボックスに「UserControlTest」と入力し、[OK] をクリックする。 新しいプロジェクトがソリューションエクスプローラに追加され、新しいフォームが表示される。 ５．ソリューションエクスプローラのUserControlTest プロジェクトをクリックし、[プロジェクト] メ ニューの [スタートアッププロジェクトに設定] をクリックする。 ６．ツールボックスで、NamesControl をクリックし、フォームにドラッグする。 ７．[プロパティ] ウィンドウで、FirstNameText、MiddleNameText、及び、LastNameText の各プロ パティを、自分の名前に合わせて設定する。 ８．F5 キーを押してプログラムを実行する。テキストボックスで名前を変更して、ラベルが正しく更 新される事を確認する。 ９．[ファイル] メニューの [総てを保存] をクリックして変更を保存する。
■ 名前付き値を持つプロパティの追加 ■ 此の資料では、値のリストを含むプロパティをユーザーコントロールに追加する方法を解説する。 ■ 名前付き値 此処迄でユーザーコントロールに追加したプロパティは総て、文字列値に記録されたが、プロパティの 型は各種選択出来る。以前の項で設定したPictureBox コントロールの SizeMode プロパティの様に、 事前設定された値の選択可能なリストを提供した方が良い場合も有る。 例えば、FullName ラベルでの名前の表示方法を選択出来る NamesControl のプロパティを作成する場 合を考えて観る。選択する値のリスト（first name first、last name first、first and last name only 等） が必要で有る。
Visual Basic で、必要な値を含む列挙型を作成出来る。列挙とは、箇条書きを意味する装飾的な用語で 有る。Visual Basic は、名前で数値を参照出来る様に数値を保存する。次の例で示す様に、列挙型は Enum キーワードを使用して記述する。
Public Enum Display FirstMiddleLast FirstLast LastFirstMiddle LastFirst End Enum 作成した列挙型は、他の型と同じ要領で使用出来る。値のリストを表示するプロパティを追加するには、 最初にEnum と同じ型の変数を記述し、次に同じ型のプロパティを宣言する。デザイン時に、列挙に含 まれて居る値のリストが [プロパティ] ウィンドウに表示される。 ■ 遣って観よう 値のリストを表示するプロパティを追加するには １．前の項で作成した NamesUserControl プロジェクトを開く。プロジェクトを保存しなかった場合 は、先ず、前の項「ユーザーコントロールへのコードの追加」に戻って、其の項の手順を完了する 必要が有る。 ２．ソリューションエクスプローラのNamesControl.vb をクリックし、[表示] メニューの [コード] を クリックする。 ３．コードエディタで、列挙を作成する次のコードをクラスに追加する。 Public Enum Display
FirstMiddleLast FirstLast LastFirstMiddle LastFirst End Enum ４．次のコードを追加する事に依り、新しいプロパティを追加する。 Private DisplayStyleList As Display
Property DisplayStyle() As Display Get
Return DisplayStyleList End Get
Set(ByVal value As Display) DisplayStyleList = value End Set
End Property
５．FirstName_TextChanged イベントハンドラ内で既存のコードを削除し、其れを次のコードに置換 する。
Select Case DisplayStyleList Case Display.FirstLast
FullName.Text = FirstName.Text & " " & LastName.Text Case Display.FirstMiddleLast
FullName.Text = FirstName.Text & " " & MiddleName.Text & " " & LastName.Text Case Display.LastFirst
FullName.Text = LastName.Text & ", " & FirstName.Text Case Display.LastFirstMiddle
FullName.Text = LastName.Text & ", " & FirstName.Text & " " & MiddleName.Text End Select ６．F5 キーを押してプログラムを実行する。3 つのテキストボックスに、ファーストネーム、ラストネ ーム、及び、ミドルネームを入力する。 ７．[ユーザーコントロールテストコンテナ] で、[プロパティ] グリッドの一番下にスクロールし、 DisplayStyle プロパティを選択する。別の値を選択し、孰れかのテキストボックスのテキストを変 更する事で、ラベルが何の様に変化するか観察する。 ８．[ファイル] メニューの [総てを保存] をクリックして変更を保存する。 ■ ユーザーコントロールのカスタマイズ ■ 此の資料では、ユーザーコントロールの利便性を高める様にカスタマイズする方法に付いて説明する。 ■ ラベルの追加 前の項で、NamesControl ユーザーコントロールをテストし、正しく動作する事を確認した。此のコン トロールには、改良の余地が有る。例えば、何のテキストボックスに何の名前を入力するのかが明確で ない点や、ユーザーに3 つの名前総てを確実に入力して貰えるとは限らない点で有る。 此のユーザーコントロールの利便性を高める為に、各テキストボックスを識別するラベルを追加出来る。 ラベルのテキストを、"First Name"、"Middle Name"、及び、"Last Name" と設定しても良いが、若 し後で "Middle Initial" が必要と成った場合は何うすれば良いだろうか。テキストをデザイン時に変更 出来る様にし、亦、各プロパティに既定値を用意出来る様、ラベルテキストを表すプロパティを作成す る方が適切で有る。
■ 遣って観よう
１．前の項で作成した NamesUserControl プロジェクトを開く。プロジェクトを保存しなかった場合 は、先ず、前の項「ユーザーコントロールのテスト」に戻って、其の項の手順を完了する必要が有 る。 ２．ソリューションエクスプローラのNamesControl.vb をクリックし、[表示] メニューの [デザイナ] をクリックする。 ３．ツールボックスから、3 つの Label コントロールをデザイナにドラッグし、各 TextBox の上に配 置する。 ４．ソリューションエクスプローラのNamesControl.vb をクリックし、[表示] メニューの [コード] を クリックする。 ５．コードエディタで、ラベルテキストのプロパティを作成する次のコードをクラスに追加する。 Private text1 As String = "First Name"
Property Label1Text() As String Get
Return text1 End Get
Set(ByVal value As String) text1 = value
Label1.Text = text1 End Set
End Property
Private text2 As String = "Middle Name" Property Label2Text() As String
Get
Return text2 End Get
Set(ByVal value As String) text2 = value
Label2.Text = text2 End Set
End Property
Private text3 As String = "Last Name" Property Label3Text() As String Get
Return text3 End Get
Set(ByVal value As String) text3 = value Label3.Text = text3 End Set End Property 此のコードでは、ラベルテキストを表す3 つの Private 変数を宣言して居り、表示する既定値を指 定して居る。 ６．コードエディタで、左のドロップダウンボックスの [(NamesControl イベント)] を選択し、右のド ロップダウンボックスの [Load] イベントを選択する。 ７．NamesControl_Load イベントハンドラに次のコードを追加する。
' Initialize the three labels Me.Label1.Text = Label1Text Me.Label2.Text = Label2Text Me.Label3.Text = Label3Text ８．[ビルド] メニューの [ソリューションのビルド] をクリックする。 ９．ソリューションエクスプローラでForm1.vb を選択して、[表示] メニューの [デザイナ] をクリッ クする。 ラベルに既定のテキストが含まれて居る事を確認する。[プロパティ] ウィンドウで Label1Text プ ロパティを変更し、コントロールでも同様に変更される事を確認する。 Ａ．[ファイル] メニューの [閉じる] をクリックして、フォーム デザイナを閉じる。 ■ 検証の追加 利便性を高める為の今1 つのカスタマイズと仕ては、入力内容を検証して正しいか何うかを確認するコ ードの追加が有る。各TextBox コントロールを個別に検証しなくても済む、ユーザーコントロール全体 用の検証コードを作成出来る。 大半のコントロールには、フォーカスが他に移動した時に発生するValidating イベントが有る。検証コ ードは其処に入力する。此処では、各テキストボックスに名前が入力されて居る事を確認するコードを 記述する必要が有る。 空のテキストボックスが有る場合、名前を入力する様ユーザーに通知するメッセージボックスを表示す る。既定のメッセージを格納するプロパティを用意すると、コントロールのユーザーがメッセージを変 更して、必要な内容を通知出来る。 亦、コントロールのユーザーに依っては、ミドルネームを必要としない可能性も有るので、MiddleName テキストボックスの検証をオフにする為のBoolean プロパティも追加する必要が有る。 ■ 遣って観よう 検証を追加するには １．コードエディタで、検証に関連する2 つのプロパティのコードを追加する。1 つは、ミドルネーム が必要か何うかを指定するプロパティ、今1 つは、検証が失敗した場合に表示するメッセージを指 定するプロパティで有る。
Private required As Boolean = True
Property MiddleNameRequired() As Boolean Get
Return required End Get
Set(ByVal value As Boolean) required = value
End Set End Property
Private errormessage As String = "Please enter your name." Property ValidationErrorMessage() As String
Get
Return errormessage End Get
Set(ByVal value As String) errormessage = value End Set End Property ２．コードエディタで、左のドロップダウンボックスの [(NamesControl イベント)] を選択し、右のド ロップダウンボックスの [検証中] イベントを選択する。 ３．NamesControl_Validating イベントハンドラに次のコードを追加する。 If MiddleNameRequired = True Then
If FirstName.Text = "" Or MiddleName.Text = "" Or _ LastName.Text = "" Then
MsgBox(ValidationErrorMessage) End If
Else
' Middle name isn't required.
If FirstName.Text = "" Or LastName.Text = "" Then MsgBox(ValidationErrorMessage) End If End If ４．[ビルド] メニューの [ソリューションのビルド] をクリックする。 ５．ソリューションエクスプローラでForm1.vb を選択して、[表示] メニューの [デザイナ] をクリッ クする。 フォーム上のユーザーコントロールを選択し、2 つの新しいプロパティが [プロパティ] ウィンド ウに表示される事を確認する。 ６．ツールボックスから、フォームにButton コントロールをドラッグする。 ７．F5 キーを押してプログラムを実行する。 姓 と 名 を 入 力 す る 。 ミ ド ル ネ ー ム は 入 力 せ ず に 置 く 。 ボ タ ン を ク リ ッ ク す る と 、 ValidationErrorMessage の内容を伝えるメッセージボックスが表示される。 ８．[ファイル] メニューの [総てを保存] をクリックして変更を保存する。
