詳細情報 : ユーザー コントロールのカスタマイズ
更新 : 2007 年 11 月
このレッスンでは、ユーザー コントロールの利便性を高めるようにカスタマイズする方法について説明します。
ラベルの追加
前のレッスンで、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 イベント)] を選択し、右のドロップダウン ボックスの [Validating] イベントを選択します。
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 の内容を伝えるメッセージ ボックスが表示されます。
[ファイル] メニューの [すべてを保存] をクリックして変更を保存します。
次の手順
このレッスンでは、ユーザー コントロールをカスタマイズして利便性を高める方法について説明しました。次のレッスンでは、グラフィックスを使用して画像やテキストを描画する方法について説明します。
次のレッスン : 「ピクチャの描画 : グラフィックスを使用する」