Share via

詳細情報 : ユーザー コントロールのカスタマイズ

  • [アーティクル]

更新 : 2007 年 11 月

このレッスンでは、ユーザー コントロールの利便性を高めるようにカスタマイズする方法について説明します。

ラベルの追加

前のレッスンで、NamesControl ユーザー コントロールをテストし、正しく動作することを確認しました。このコントロールには、改良の余地があります。たとえば、どのテキスト ボックスにどの名前を入力するのかが明確でない点や、ユーザーに 3 つの名前すべてを確実に入力してもらえるとは限らない点です。

このユーザー コントロールの利便性を高めるために、各テキスト ボックスを識別するラベルを追加できます。ラベルのテキストを、"First Name"、"Middle Name"、および "Last Name" と設定してもよいですが、もし後で "Middle Initial" が必要となった場合はどうすればよいでしょうか。テキストをデザイン時に変更できるようにし、また各プロパティに既定値を用意できるよう、ラベル テキストを表すプロパティを作成する方が適切です。

やってみよう

ユーザー コントロールをカスタマイズするには

  1. 前のレッスンで作成した NamesUserControl プロジェクトを開きます。プロジェクトを保存しなかった場合は、まず前のレッスン「ユーザー コントロールのテスト」に戻って、そのレッスンの手順を完了する必要があります。

  2. ソリューション エクスプローラの NamesControl.vb をクリックし、[表示] メニューの [デザイナ] をクリックします。

  3. ツールボックスから、3 つの Label コントロールをデザイナにドラッグし、各 TextBox の上に配置します。

  4. ソリューション エクスプローラの NamesControl.vb をクリックし、[表示] メニューの [コード] をクリックします。

  5. コード エディタで、ラベル テキストのプロパティを作成する次のコードをクラスに追加します。

    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 変数を宣言しており、表示する既定値を指定しています。

  6. コード エディタで、左のドロップダウン ボックスの [(NamesControl イベント)] を選択し、右のドロップダウン ボックスの [Load] イベントを選択します。

  7. NamesControl_Load イベント ハンドラに次のコードを追加します。

    ' Initialize the three labels
Me.Label1.Text = Label1Text
Me.Label2.Text = Label2Text
Me.Label3.Text = Label3Text

  8. [ビルド] メニューの [ソリューションのビルド] をクリックします。

  9. ソリューション エクスプローラで Form1.vb を選択して、[表示] メニューの [デザイナ] をクリックします。

    ラベルに既定のテキストが含まれていることを確認します。[プロパティ] ウィンドウで Label1Text プロパティを変更し、コントロールでも同様に変更されることを確認します。

  10. [ファイル] メニューの [閉じる] をクリックして、フォーム デザイナを閉じます。

検証の追加

利便性を高めるためのもう 1 つのカスタマイズとしては、入力内容を検証して正しいかどうかを確認するコードの追加があります。各 TextBox コントロールを個別に検証しなくても済む、ユーザー コントロール全体用の検証コードを作成できます。

大半のコントロールには、フォーカスが他に移動したときに発生する Validating イベントがあります。検証コードはそこに入力します。ここでは、各テキスト ボックスに名前が入力されていることを確認するコードを記述する必要があります。

空のテキスト ボックスがある場合、名前を入力するようユーザーに通知するメッセージ ボックスを表示します。既定のメッセージを格納するプロパティを用意すると、コントロールのユーザーがメッセージを変更して、必要な内容を通知できます。

また、コントロールのユーザーによっては、ミドル ネームを必要としない可能性もあるので、MiddleName テキスト ボックスの検証をオフにするための Boolean プロパティも追加する必要があります。

やってみよう

検証を追加するには

  1. コード エディタで、検証に関連する 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

  2. コード エディタで、左のドロップダウン ボックスの [(NamesControl イベント)] を選択し、右のドロップダウン ボックスの [Validating] イベントを選択します。

  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. [ファイル] メニューの [すべてを保存] をクリックして変更を保存します。

次の手順

このレッスンでは、ユーザー コントロールをカスタマイズして利便性を高める方法について説明しました。次のレッスンでは、グラフィックスを使用して画像やテキストを描画する方法について説明します。

次のレッスン : 「ピクチャの描画 : グラフィックスを使用する」

参照

処理手順

ユーザー コントロールのテスト

その他の技術情報

表示されるオブジェクト : 初めてのユーザー コントロールの作成

オブジェクトによるプログラミング : クラスを使用する

Visual Basic ガイド ツアー