User コントロール 初めてのユーザーコントロールの作成 作成したクラスは他のプログラムで再利用出来る為 同じコードを何度も繰り返し作成する必要が無い コントロールも 複数のプロジェクトで再利用出来るクラスで有る 同じユーザーインターフェイスを何度も繰り返してデザインすると謂う経験は 恐らく誰でも有る 例えば 姓と名を入力する為の 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 を使用してユーザーコントロールを作成するには 1.[ ファイル ] メニューの [ 新規作成 ] をポイントし [ プロジェクト ] をクリックする -1-
2.[ 新しいプロジェクト ] ダイアログボックスの [ テンプレート ] ペインで [ クラスライブラリ ] をクリックし [OK] をクリックする 3.[ プロジェクト ] メニューの [ ユーザーコントロールの追加 ] をクリックする 4.[ 新しい項目の追加 ] ダイアログボックスで [ ユーザーコントロール ] をクリックする 5.[ ファイル名 ] ボックスに NamesControl と入力し [ 追加 ] をクリックする 新しいユーザーコントロールテンプレートがプロジェクトに追加され ユーザーコントロールデザイナが開く 6. ソリューションエクスプローラで Class1.vb を右クリックし [ 削除 ] をクリックして [OK] をクリックする 7.[ ファイル ] メニューの [ 総てを保存 ] をクリックする 8.[ プロジェクトの保存 ] ダイアログボックスで NamesUserControl と入力し [ 保存 ] をクリックする Visual Studio 2005 を使用してユーザーコントロールを作成するには 1.[ ファイル ] メニューの [ 新規作成 ] をポイントし [ プロジェクト ] をクリックする 2.[ 新しいプロジェクト ] ダイアログボックスの [ テンプレート ] ペインで [Windows コントロールライブラリ ] をクリックする 3.[ プロジェクト名 ] ボックスに NamesControl と入力し [OK] をクリックする 新しいユーザーコントロールテンプレートがプロジェクトに追加され ユーザーコントロールデザイナが開く 4.[ ファイル ] メニューの [ 総てを保存 ] をクリックする 5.[ プロジェクトの保存 ] ダイアログボックスで NamesUserControl と入力し [ 保存 ] をクリックする ユーザーコントロールへのコントロールの追加 此の資料では コントロールを追加して複合ユーザーコントロールを作成する方法を説明する ユーザーコントロールのデザイン 先にも述べた様に ユーザーコントロールの大多数が複合コントロール 詰まり 1 つ以上の標準 Windows フォームコントロールを組み合わせたコントロールで有る コントロールは フォームをデザインする場合と同様 ツールボックスからユーザーコントロールデザイナにドラッグする事に依って ユーザーコントロールテンプレートに追加出来る コントロールを追加したら デザイナでサイズ変更や移動を行ったり [ プロパティ ] ウィンドウでプロパティを設定したり出来る 例えば Label コントロールを追加してフルネームを表示し 3 つの TextBox コントロールを追加して -2-
ファーストネーム ラストネーム 及び ミドルネームを表示する事が可能で有る ユーザーコントロールにコントロールを追加するには 1. 前の項で作成した NamesUserControl プロジェクトを開く プロジェクトを保存しなかった場合は 先ず 前の項 ユーザーコントロールデザイナに付いて に戻って 其の項の手順を完了する必要が有る 2. ソリューションエクスプローラの NamesControl.vb をクリックし [ 表示 ] メニューの [ デザイナ ] をクリックする 3. ツールボックスから デザイナに Label コントロールをドラッグする ヒント : ウィンドウを開いた儘に仕て居る場合は ツールボックスを使用する方が簡単で有る 此れは 押しピンの様に表示されて居る [ 自動的に隠す ] アイコンをクリックする事で実行出来る 4.[ プロパティ ] ウィンドウで Name プロパティを FullName に変更する 5. ツールボックスから デザイナに 3 つの Textbox コントロールをドラッグする コントロールを好きな位置に配置して良い 6.[ プロパティ ] ウィンドウで Name プロパティを FirstName MiddleName 及び LastName に変更する 7.[ ファイル ] メニューの [ 総てを保存 ] をクリックして変更を保存する ユーザーコントロールへのコードの追加 此の資料では ユーザーコントロールにコードを追加して フルネームの表示と新しいプロパティの公開を行う方法に付いて説明する ユーザーコントロールにも 標準コントロールと同じ様に プロパティ メソッド 及び イベントが有る コントロールのイベントを処理するコードの記述や コントロールのユーザーに何のプロパティを公開するかの判断は コントロールの開発者が行う ユーザーコントロールのイベント処理 ユーザーコントロールの利便性を高める為には コントロールのイベントを処理するコードを記述する必要が有る ユーザーコントロールのイベント処理プロシージャを記述するのは フォームやコントロールのイベント処理プロシージャを記述するのと変わらない 此の例では TextChanged イベントハンドラを使用して FirstName MiddleName 及び LastName の各ボックスへの入力時に 其の内容で FullName ラベルを更新するイベントプロシージャを記述する ユーザーコントロールにコードを追加するには 1. 前の項で作成した NamesUserControl プロジェクトを開く プロジェクトを保存しなかった場合は 先ず 前の項 ユーザーコントロールデザイナに付いて に戻って 其の項の手順を完了する -3-
必要が有る 2. ソリューションエクスプローラの NamesControl.vb をクリックし [ 表示 ] メニューの [ コード ] をクリックする 3. コードエディタで 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 4.F5 キーを押してプログラムを実行する [ ユーザーコントロールテストコンテナ ] が開き ユーザーコントロールが表示される 5. 名 ミドルネーム 及び 姓を 3 つのテキストボックスに入力する 入力時に FullName ラベルに名前が表示される 上で入力したコードを見ると 宣言の Handles 句に依り 3 つの TextBox コントロール総ての TextChanged イベントが処理される事が解る 何のテキストボックスを最初に入力した場合でも 入力に合わせて FullName ラベルが常に更新される ユーザーコントロールのプロパティの公開 標準コントロールでは コントロールのデザイン時と実行時にプロパティの値を設定 取得出来る ユーザーコントロールでも プロパティを利用出来る様にする必要が有る 然うすると デザイン時に [ プロパティ ] ウィンドウで設定出来 コードでも参照出来る様に成る ユーザーコントロールのプロパティを公開するのは クラスのプロパティを公開するのと非常に良く似て居る 大きな違いは ユーザーコントロールに含まれて居るコントロールのプロパティも公開出来ると謂う点で有る クラスと同様に プロパティを宣言し プロシージャと Set プロシージャにコードを追加する ユーザーコントロールの中に含まれて居るコントロールのプロパティを公開する場合 其の値を格納する為のプライベート変数を宣言する必要は無い 其のコントロールのプロパティが格納する 現時点では FirstName MiddleName 及び LastName の各コントロールに入力されて居るテキストや FullName ラベルの値を取得する方法は用意して居ない コントロールの利便性を高める為には 此等の値をプロパティとして公開する必要が有る FullName ラベルの値は 外部のコードから変更出来ない様 読み取り専用のプロパティと仕て公開する必要が有る プロパティを追加するには 1. コードエディタで FirstName MiddleName 及び LastName の各値をプロパティと仕て公開する次のコードを追加する Property FirstNameText( ) As String Return FirstName.Text -4-
End FirstName.Text = value Property MiddleNameText( ) As String Return MiddleName.Text End MiddleName.Text = value Property LastNameText( ) As String Return LastName.Text End LastName.Text = value 2.FullName ラベルの値を読み取り専用プロパティと仕て公開する次のコードを追加する ReadOnly Property FullNameText( ) As String Return FullName.Text End 3.F5 キーを押してプログラムを実行する 4.[ ユーザーコントロールテストコンテナ ] で [ プロパティ ] グリッドの一番下にスクロールし FirstNameText プロパティを選択する 名前を入力し FullNameText プロパティを選択する FirstName テキストボックスに名前が表示され FullNameText プロパティと一致する 他のプロパティの幾つかを [ プロパティ ] グリッドとコントロール自体の両方で変更して観て 両者の関係を確認する 此れは 此のコントロールのユーザーがデザイン時に経験する事と同じで有る 5.[ ファイル ] メニューの [ 総てを保存 ] をクリックして変更を保存する ユーザーコントロールのテスト 此の資料では ユーザーコントロールを他のプロジェクトでテストして実行時の動作を確認する方法に付いて説明する 実行時の動作 ユーザーコントロールが完成し テストコンテナでデザイン時の動作をテストしたら プログラムで使用した時の動作を確認する必要が有る Visual Basic 2005 では Windows アプリケーションプロジェクトを追加する事に依り ユーザーコントロールを簡単にテスト出来る -5-
ユーザーコントロールは ツールボックスに自動的に表示される 然して 他のコントロールの場合と同様にフォームに追加して プロパティを設定出来る ユーザーコントロールをテストするには 1. 前の項で作成した NamesUserControl プロジェクトを開く プロジェクトを保存しなかった場合は 先ず 前の項 ユーザーコントロールへのコードの追加 に戻って 其の項の手順を完了する必要が有る 2.[ ファイル ] メニューの [ 追加 ] をポイントし [ 新しいプロジェクト ] をクリックする 3.[ 新しいプロジェクトの追加 ] ダイアログボックスで [Windows アプリケーション ] をクリックする 4.[ プロジェクト名 ] ボックスに UserControlTest と入力し [OK] をクリックする 新しいプロジェクトがソリューションエクスプローラに追加され 新しいフォームが表示される 5. ソリューションエクスプローラの UserControlTest プロジェクトをクリックし [ プロジェクト ] メニューの [ スタートアッププロジェクトに設定 ] をクリックする 6. ツールボックスで NamesControl をクリックし フォームにドラッグする 7.[ プロパティ ] ウィンドウで FirstNameText MiddleNameText 及び LastNameText の各プロパティを 自分の名前に合わせて設定する 8.F5 キーを押してプログラムを実行する テキストボックスで名前を変更して ラベルが正しく更新される事を確認する 9.[ ファイル ] メニューの [ 総てを保存 ] をクリックして変更を保存する -6-
名前付き値を持つプロパティの追加 此の資料では 値のリストを含むプロパティをユーザーコントロールに追加する方法を解説する 名前付き値 此処迄でユーザーコントロールに追加したプロパティは総て 文字列値に記録されたが プロパティの型は各種選択出来る 以前の項で設定した 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 と同じ型の変数を記述し 次に同じ型のプロパティを宣言する デザイン時に 列挙に含まれて居る値のリストが [ プロパティ ] ウィンドウに表示される 値のリストを表示するプロパティを追加するには 1. 前の項で作成した NamesUserControl プロジェクトを開く プロジェクトを保存しなかった場合は 先ず 前の項 ユーザーコントロールへのコードの追加 に戻って 其の項の手順を完了する必要が有る 2. ソリューションエクスプローラの NamesControl.vb をクリックし [ 表示 ] メニューの [ コード ] をクリックする 3. コードエディタで 列挙を作成する次のコードをクラスに追加する Public Enum Display FirstMiddleLast FirstLast LastFirstMiddle LastFirst End Enum 4. 次のコードを追加する事に依り 新しいプロパティを追加する Private DisplayStyleList As Display -7-
Property DisplayStyle() As Display Return DisplayStyleList End Set(ByVal value As Display) DisplayStyleList = value 5.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 6.F5 キーを押してプログラムを実行する 3 つのテキストボックスに ファーストネーム ラストネーム 及び ミドルネームを入力する 7.[ ユーザーコントロールテストコンテナ ] で [ プロパティ ] グリッドの一番下にスクロールし DisplayStyle プロパティを選択する 別の値を選択し 孰れかのテキストボックスのテキストを変更する事で ラベルが何の様に変化するか観察する 8.[ ファイル ] メニューの [ 総てを保存 ] をクリックして変更を保存する ユーザーコントロールのカスタマイズ 此の資料では ユーザーコントロールの利便性を高める様にカスタマイズする方法に付いて説明する ラベルの追加 前の項で NamesControl ユーザーコントロールをテストし 正しく動作する事を確認した 此のコントロールには 改良の余地が有る 例えば 何のテキストボックスに何の名前を入力するのかが明確でない点や ユーザーに 3 つの名前総てを確実に入力して貰えるとは限らない点で有る 此のユーザーコントロールの利便性を高める為に 各テキストボックスを識別するラベルを追加出来る ラベルのテキストを "First Name" "Middle Name" 及び "Last Name" と設定しても良いが 若し後で "Middle Initial" が必要と成った場合は何うすれば良いだろうか テキストをデザイン時に変更出来る様にし 亦 各プロパティに既定値を用意出来る様 ラベルテキストを表すプロパティを作成する方が適切で有る ユーザーコントロールをカスタマイズするには -8-
1. 前の項で作成した NamesUserControl プロジェクトを開く プロジェクトを保存しなかった場合は 先ず 前の項 ユーザーコントロールのテスト に戻って 其の項の手順を完了する必要が有る 2. ソリューションエクスプローラの NamesControl.vb をクリックし [ 表示 ] メニューの [ デザイナ ] をクリックする 3. ツールボックスから 3 つの Label コントロールをデザイナにドラッグし 各 TextBox の上に配置する 4. ソリューションエクスプローラの NamesControl.vb をクリックし [ 表示 ] メニューの [ コード ] をクリックする 5. コードエディタで ラベルテキストのプロパティを作成する次のコードをクラスに追加する Private text1 As String = "First Name" Property Label1Text() As String Return text1 End text1 = value Label1.Text = text1 Private text2 As String = "Middle Name" Property Label2Text() As String Return text2 End text2 = value Label2.Text = text2 Private text3 As String = "Last Name" Property Label3Text() As String Return text3 End text3 = value Label3.Text = text3 此のコードでは ラベルテキストを表す 3 つの Private 変数を宣言して居り 表示する既定値を指定して居る 6. コードエディタで 左のドロップダウンボックスの [(NamesControl イベント )] を選択し 右のドロップダウンボックスの [Load] イベントを選択する 7.NamesControl_Load イベントハンドラに次のコードを追加する -9-
' Initialize the three labels Me.Label1.Text = Label1Text Me.Label2.Text = Label2Text Me.Label3.Text = Label3Text 8.[ ビルド ] メニューの [ ソリューションのビルド ] をクリックする 9. ソリューションエクスプローラで Form1.vb を選択して [ 表示 ] メニューの [ デザイナ ] をクリックする ラベルに既定のテキストが含まれて居る事を確認する [ プロパティ ] ウィンドウで Label1Text プロパティを変更し コントロールでも同様に変更される事を確認する A.[ ファイル ] メニューの [ 閉じる ] をクリックして フォームデザイナを閉じる 検証の追加 利便性を高める為の今 1 つのカスタマイズと仕ては 入力内容を検証して正しいか何うかを確認するコードの追加が有る 各 TextBox コントロールを個別に検証しなくても済む ユーザーコントロール全体用の検証コードを作成出来る 大半のコントロールには フォーカスが他に移動した時に発生する Validating イベントが有る 検証コードは其処に入力する 此処では 各テキストボックスに名前が入力されて居る事を確認するコードを記述する必要が有る 空のテキストボックスが有る場合 名前を入力する様ユーザーに通知するメッセージボックスを表示する 既定のメッセージを格納するプロパティを用意すると コントロールのユーザーがメッセージを変更して 必要な内容を通知出来る 亦 コントロールのユーザーに依っては ミドルネームを必要としない可能性も有るので MiddleName テキストボックスの検証をオフにする為の Boolean プロパティも追加する必要が有る 検証を追加するには 1. コードエディタで 検証に関連する 2 つのプロパティのコードを追加する 1 つは ミドルネームが必要か何うかを指定するプロパティ 今 1 つは 検証が失敗した場合に表示するメッセージを指定するプロパティで有る Private required As Boolean = True Property MiddleNameRequired() As Boolean Return required End Set(ByVal value As Boolean) required = value Private errormessage As String = "Please enter your name." Property ValidationErrorMessage() As String -10-
Return errormessage End errormessage = value 2. コードエディタで 左のドロップダウンボックスの [(NamesControl イベント )] を選択し 右のドロップダウンボックスの [ 検証中 ] イベントを選択する 3.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 4.[ ビルド ] メニューの [ ソリューションのビルド ] をクリックする 5. ソリューションエクスプローラで Form1.vb を選択して [ 表示 ] メニューの [ デザイナ ] をクリックする フォーム上のユーザーコントロールを選択し 2 つの新しいプロパティが [ プロパティ ] ウィンドウに表示される事を確認する 6. ツールボックスから フォームに Button コントロールをドラッグする 7.F5 キーを押してプログラムを実行する 姓と名を入力する ミドルネームは入力せずに置く ボタンをクリックすると ValidationErrorMessage の内容を伝えるメッセージボックスが表示される 8.[ ファイル ] メニューの [ 総てを保存 ] をクリックして変更を保存する -11-