チュートリアル : Visual Basic による複合コントロールの作成

[アーティクル]
08/09/2011

複合コントロールは、カスタムグラフィカルインターフェイスの作成と再利用のための手段を提供します。複合コントロールは、基本的には表示できる形式を持つコンポーネントです。そのため、ユーザーコントロールは、1 つ以上の Windows フォームコントロール、コンポーネント、またはコードのブロックから構成でき、ユーザー入力を検査したり、表示プロパティを変更したり、作成者によって要求されるその他のタスクを実行したりすることで機能を拡張できます。複合コントロールは、他のコントロールと同じ方法で Windows フォームに配置できます。このチュートリアルの前半では、ctlClock という名前の単純な複合コントロールを作成します。後半では、継承によって ctlClock の機能を拡張します。

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

プロジェクトの作成

新しいプロジェクトを作成するときには、その名前を指定することにより、ルート名前空間、アセンブリ名、およびプロジェクト名を設定し、既定のコンポーネントが正しい名前空間に含まれるようにします。

ctlClockLib コントロールライブラリおよび ctlClock コントロールを作成するには

[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックして [新しいプロジェクト] ダイアログボックスを表示します。
Visual Basic プロジェクトの一覧の [Windows コントロールライブラリ] プロジェクトテンプレートをクリックし、[プロジェクト名] ボックスに「ctlClockLib」と入力して、[OK] をクリックします。

プロジェクト名 ctlClockLib は、既定でルート名前空間にも割り当てられます。ルート名前空間は、アセンブリ内のコンポーネント名の修飾に使用されます。たとえば、ctlClock という名前のコンポーネントが 2 つのアセンブリに含まれる場合は、ctlClockLib.ctlClock という形で目的の ctlClock コンポーネントを指定できます。
ソリューションエクスプローラーで、UserControl1.vb を右クリックし、[名前の変更] をクリックします。ファイル名を「ctlClock.vb」に変更します。コード要素 "UserControl1" へのすべての参照の名前を変更するかどうかを確認するダイアログボックスが表示されたら、[はい] をクリックします。

注意

既定では、複合コントロールはシステムによって提供される UserControl クラスを継承します。 UserControl クラスは、すべての複合コントロールに必要な機能を提供し、標準のメソッドおよびプロパティを実装します。
[ファイル] メニューの [すべてを保存] をクリックして、プロジェクトを保存します。

複合コントロールへの Windows コントロールおよびコンポーネントの追加

ビジュアルインターフェイスは、複合コントロールの基本的な部分です。このビジュアルインターフェイスは、デザイナー画面に 1 つ以上の Windows コントロールを追加することによって実装されます。次の例では、複合コントロールに Windows コントロールを取り込んで、機能を実装するコードを記述します。

複合コントロールに Label と Timer を追加するには

ソリューションエクスプローラーで ctlClock.vb を右クリックし、[デザイナーの表示] をクリックします。
ツールボックスの [コモンコントロール] ノードを展開し、[Label] をダブルクリックします。

Label1 という名前の Label がデザイナー画面のコントロールに追加されます。
デザイナーで Label1 をクリックします。プロパティウィンドウで、次のプロパティを設定します。

プロパティ

変更後の値

Name

lblDisplay

Text

(空白)

TextAlign

MiddleCenter

Font.Size

14
ツールボックスの [コンポーネント] ノードを展開し、[Timer] をダブルクリックします。

Timer はコンポーネントであるため、実行時には表示できる形式を持ちません。このため、デザイナー画面にはコントロールと共には表示されず、コンポーネントデザイナー (デザイナー画面の下部にあるトレイ) に表示されます。
コンポーネントデザイナーで、[Timer1] をクリックし、Interval プロパティを 1000、Enabled プロパティを True に設定します。

Interval プロパティは、タイマーコンポーネントが時を刻む頻度を制御します。 Timer1 が時を刻むたびに、Timer1_Tick イベントのコードが実行されます。このプロパティは、タイマーが何ミリ秒ごとに時を刻むかを表しています。
コンポーネントデザイナーで、[Timer1] をダブルクリックして、ctlClock の Timer1_Tick イベントに移動します。
コードを次のコードサンプルのように変更します。アクセス修飾子を必ず Private から Protected に変更してください。

[Visual Basic]
```
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As _
    System.EventArgs) Handles Timer1.Tick
    ' Causes the label to display the current time.  
    lblDisplay.Text = Format(Now, "hh:mm:ss")
End Sub
```
このコードは、現在の時刻を lblDisplay に表示します。 Timer1 の間隔は 1000 に設定されているため、このイベントは 1000 ミリ秒ごとに発生します。したがって、現在の時刻は 1 秒ごとに更新されます。
メソッドをオーバーライドできるように変更します。詳細については、後の「ユーザーコントロールからの継承」を参照してください。

[Visual Basic]
```
Protected Overridable Sub Timer1_Tick(ByVal sender As Object, ByVal _
    e As System.EventArgs) Handles Timer1.Tick
```
[ファイル] メニューの [すべてを保存] をクリックして、プロジェクトを保存します。

プロパティ	変更後の値
Name	lblDisplay
Text	(空白)
TextAlign	MiddleCenter
Font.Size	14

複合コントロールへのプロパティの追加

現在、クロックコントロールは、それぞれが固有のプロパティセットを持つ Label コントロールと Timer コンポーネントをカプセル化しています。各コントロールのプロパティは、コントロールの後続のユーザーからはアクセスできませんが、適切なコードブロックを作成することによってカスタムプロパティを作成および公開できます。次の手順では、ユーザーが背景とテキストの色を変更できるようにするプロパティをコントロールに追加します。

複合コントロールにプロパティを追加するには

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

コントロールのコードエディターが表示されます。
Public Class ctlClock ステートメントを探します。この行の直後に、次のコードを追加します。

[Visual Basic]
```
Private colFColor as Color
Private colBColor as Color
```
これらのステートメントは、作成するプロパティの値を格納するために使用するプライベート変数を作成します。

手順 2. の変数宣言の下に次のコードを挿入します。

[Visual Basic]

' Declares the name and type of the property.
Property ClockBackColor() as Color
    ' Retrieves the value of the private variable colBColor.
    Get
        Return colBColor
    End Get
    ' Stores the selected value in the private variable colBColor, and 
    ' updates the background color of the label control lblDisplay.
    Set(ByVal value as Color)
        colBColor = value
        lblDisplay.BackColor = colBColor   
    End Set

End Property
' Provides a similar set of instructions for the foreground color.
Property ClockForeColor() as Color
    Get
        Return colFColor
    End Get
    Set(ByVal value as Color)
        colFColor = value
        lblDisplay.ForeColor = colFColor
    End Set
End Property

上記のコードは、Property ステートメントを呼び出すことにより、このコントロールを今後使用するユーザーが ClockForeColor および ClockBackColor という 2 つのカスタムプロパティを使用できるようにします。 Get ステートメントと Set ステートメントは、プロパティに適切な機能を実装するコードと共に、プロパティ値の格納と取得の機能を提供します。

[ファイル] メニューの [すべてを保存] をクリックして、プロジェクトを保存します。

コントロールのテスト

コントロールはスタンドアロンプロジェクトではないため、コンテナーでホストする必要があります。コントロールの実行時の動作をテストし、ユーザーコントロールテストコンテナーでそのプロパティを実行します。詳細については、「方法 : UserControl の実行時の動作をテストする」を参照してください。

コントロールをテストするには

F5 キーを押してプロジェクトをビルドし、ユーザーコントロールテストコンテナーでコントロールを実行します。
テストコンテナーのプロパティグリッドで、ClockBackColor プロパティを選択し、ドロップダウン矢印をクリックしてカラーパレットを表示します。
任意の色をクリックして選択します。

コントロールの背景色が、選択した色に変更されます。
同様なイベントのシーケンスを使用して、ClockForeColor プロパティが予想どおりに機能することを確認します。
[閉じる] をクリックして [ユーザーコントロールテストコンテナー] を閉じます。

このセクションと前のセクションでは、コンポーネントと Windows コントロールをコードと結合し、複合コントロールの形式にパッケージ化してカスタム機能を提供する方法を説明しました。複合コントロールのプロパティを公開し、完了後にコントロールをテストする方法を学びました。次のセクションでは、ctlClock をベースとして継承した複合コントロールを構築する方法を学びます。

複合コントロールからの継承

前のセクションでは、再利用可能な複合コントロールに Windows コントロール、コンポーネント、およびコードを組み込む方法を学びました。この複合コントロールをベースにして、他のコントロールを作成できます。基本クラスからクラスを派生するプロセスは継承と呼ばれます。このセクションでは、ctlAlarmClock という名前の複合コントロールを作成します。このコントロールは、親コントロールである ctlClock から派生します。ここでは、親のメソッドをオーバーライドし、新しいメソッドおよびプロパティを追加することにより、ctlClock の機能を拡張する方法を学びます。

継承コントロールの作成の最初の手順は、親コントロールからの派生です。これにより、親コントロールのプロパティ、メソッド、およびグラフィカル特性をすべて持つ新しいコントロールが作成されます。このコントロールに基づいて、新しい機能を追加したり機能を変更したりできます。

継承コントロールを作成するには

ソリューションエクスプローラーで、[ctlClockLib] を右クリックします。[追加] をポイントし、[ユーザーコントロール] をクリックします。

[新しい項目の追加] ダイアログボックスが表示されます。
[継承されたユーザーコントロール] テンプレートを選択します。
[ファイル名] ボックスに「ctlAlarmClock.vb」と入力し、[追加] をクリックします。

[継承ピッカー] ダイアログボックスが表示されます。
[コンポーネント名] の [ctlClock] をダブルクリックします。
ソリューションエクスプローラーで、現在のプロジェクトを最後まで参照します。

注意

現在のプロジェクトに ctlAlarmClock.vb という名前のファイルが追加されています。

アラームプロパティの追加

複合コントロールにプロパティを追加する場合と同じ方法で、継承コントロールにプロパティを追加できます。ここでは、プロパティ宣言の構文を使用してコントロールに 2 つのプロパティを追加します。AlarmTime プロパティは、アラームを鳴らす日付と時刻の値を格納します。AlarmSet プロパティは、アラームが設定されているかどうかを示します。

複合コントロールにプロパティを追加するには

ソリューションエクスプローラーで、[ctlAlarmClock] を右クリックし、[コードの表示] をクリックします。

Public Class ctlAlarmClock として表示されている ctlAlarmClock コントロールのクラス宣言を探します。クラス宣言に次のコードを挿入します。

[Visual Basic]

Private dteAlarmTime As Date
Private blnAlarmSet As Boolean
' These properties will be declared as Public to allow future 
' developers to access them.
Public Property AlarmTime() As Date
    Get
        Return dteAlarmTime
    End Get
    Set(ByVal value as Date)
        dteAlarmTime = value
    End Set
End Property
Public Property AlarmSet() As Boolean
    Get
        Return blnAlarmSet
    End Get
    Set(ByVal value as Boolean)
        blnAlarmSet = value
    End Set
End Property

コントロールのグラフィカルインターフェイスへの追加

継承したコントロールには、継承元のコントロールと同じビジュアルインターフェイスがあります。継承コントロールには親コントロールと同じ内在コントロールがありますが、内在コントロールのプロパティは特に公開されない限り使用できません。継承した複合コントロールのグラフィカルインターフェイスも、他の複合コントロールと同じように拡張できます。引き続き、アラームクロックのビジュアルインターフェイスに、アラームが鳴ったときに点滅するラベルコントロールを追加します。

ラベルコントロールを追加するには

ソリューションエクスプローラーで、[ctlAlarmClock] を右クリックし、[デザイナーの表示] をクリックします。

ctlAlarmClock のデザイナーがメインウィンドウに表示されます。
lblDisplay (コントロールの表示部分) をクリックし、[プロパティ] ウィンドウを表示します。

注意

すべてのプロパティが表示されていますが、淡色表示になっています。つまり、これらのプロパティは lblDisplay に対してネイティブであり、[プロパティ] ウィンドウでは変更もアクセスもできません。既定では、複合コントロールに含まれているコントロールは Private であり、どのような方法によってもプロパティにアクセスできません。

注意

今後複合コントロールを使用するユーザーがその内部のコントロールにアクセスできるようにするには、内部のコントロールを Public または Protected として宣言します。これにより、適切なコードを使用して、複合コントロールに含まれるコントロールのプロパティを設定したり変更したりできるようになります。
複合コントロールに Label コントロールを追加します。
マウスを使用して、Label コントロールを表示ボックスのすぐ下にドラッグします。プロパティウィンドウで、次のプロパティを設定します。

プロパティ

設定

Name

lblAlarm

Text

Alarm!

TextAlign

MiddleCenter

Visible

False

プロパティ	設定
Name	lblAlarm
Text	Alarm!
TextAlign	MiddleCenter
Visible	False

アラーム機能の追加

前の手順では、複合コントロールでアラーム機能を有効にするためのプロパティおよびコントロールを追加しました。この手順では、現在の時刻をアラーム設定時刻と比較して、一致した場合にはアラームを鳴らしてラベルを点滅させるコードを追加します。 ctlClock の Timer1_Tick メソッドをオーバーライドしてコードを追加することにより、ctlClock の固有の機能をすべて保持しながら ctlAlarmClock の機能を拡張できます。

ctlClock の Timer1_Tick メソッドをオーバーライドするには

ソリューションエクスプローラーで ctlAlarmClock.vb を右クリックし、[コードの表示] をクリックします。
Private blnAlarmSet As Boolean ステートメントを探します。このステートメントの直後に、次のステートメントを追加します。

[Visual Basic]
```
Dim blnColorTicker as Boolean
```
ページの下部にある End Class ステートメントを探します。 End Class ステートメントの直前に、次のコードを追加します。

[Visual Basic]
```
Protected Overrides Sub Timer1_Tick(ByVal sender As Object, ByVal e _
    As System.EventArgs)
    ' Calls the Timer1_Tick method of ctlClock.
    MyBase.Timer1_Tick(sender, e)
    ' Checks to see if the Alarm is set.
    If AlarmSet = False Then
        Exit Sub
    End If
    ' If the date, hour, and minute of the alarm time are the same as
    ' now, flash and beep an alarm. 
    If AlarmTime.Date = Now.Date And AlarmTime.Hour = Now.Hour And _
        AlarmTime.Minute = Now.Minute Then
        ' Sounds an audible beep.
        Beep()
        ' Sets lblAlarmVisible to True, and changes the background color based on the 
        ' value of blnColorTicker. The background color of the label will 
        ' flash once per tick of the clock.
        lblAlarm.Visible = True
        If blnColorTicker = False Then
            lblAlarm.BackColor = Color.PeachPuff
            blnColorTicker = True
        Else
            lblAlarm.BackColor = Color.Plum
            blnColorTicker = False
        End If
    Else
        ' Once the alarm has sounded for a minute, the label is made 
        ' invisible again.
        lblAlarm.Visible = False
    End If
End Sub
```
このコードを追加することで、いくつかのタスクが実行されます。 Overrides ステートメントは、基本コントロールから継承されたメソッドの代わりに、このメソッドを使用するようにコントロールに指示します。このメソッドが呼び出されると、メソッドは MyBase.Timer1_Tick ステートメントを呼び出すことにより、オーバーライドするメソッドを呼び出します。その結果、元のコントロールに含まれるすべての機能がこのコントロールに継承されます。メソッドは次に追加のコードを実行してアラーム機能を組み込みます。アラームが発生すると、点滅するラベルコントロールが表示され、ビープ音が聞こえます。

注意

オーバーライドしているのは継承したイベントハンドラーであるため、Handles キーワードでイベントを指定する必要はありません。イベントは既にフックされています。オーバーライドしているのはハンドラーの実装です。

これで、アラーム付き時計はほぼ完成です。後は、アラームを止める手段を実装するだけです。これを行うには、lblAlarm_Click メソッドにコードを追加します。

アラームを止める手段を実装するには

ソリューションエクスプローラーで ctlAlarmClock.vb を右クリックし、[デザイナーの表示] をクリックします。
デザイナーで lblAlarm をダブルクリックします。 コードエディターが開き、Private Sub lblAlarm_Click 行が表示されます。

このメソッドを次のコードのように変更します。

[Visual Basic]

Private Sub lblAlarm_Click(ByVal sender As Object, ByVal e As _
 System.EventArgs) Handles lblAlarm.Click
    ' Turns off the alarm.
    AlarmSet = False
    ' Hides the flashing label.
    lblAlarm.Visible = False
End Sub

[ファイル] メニューの [すべてを保存] をクリックして、プロジェクトを保存します。

フォームでの継承コントロールの使用

継承コントロールは、基本クラスである ctlClock のテストと同様の方法でテストできます。F5 キーを押してプロジェクトをビルドし、ユーザーコントロールテストコンテナーでコントロールを実行します。詳細については、「方法 : UserControl の実行時の動作をテストする」を参照してください。

コントロールを使用できるようにするには、フォーム上でコントロールをホストする必要があります。標準複合コントロールと同様に、継承複合コントロールはスタンドアロン型ではないため、フォームまたは他のコンテナーでホストする必要があります。 ctlAlarmClock は機能が拡張されているため、テストにも追加のコードが必要です。次の手順では、ctlAlarmClock の機能をテストするための簡単なプログラムを記述します。 ctlAlarmClock の AlarmTime プロパティを設定および表示するコードを作成し、固有の機能をテストします。

コントロールをビルドしてテストフォームに追加するには

ソリューションエクスプローラーで、[ctlClockLib] を右クリックし、[ビルド] をクリックします。
[ファイル] メニューの [追加] をポイントし、[新しいプロジェクト] をクリックします。
ソリューションに新しい Windows アプリケーション プロジェクトを追加し、「Test」という名前を付けます。

Test プロジェクトがソリューションエクスプローラーに追加されます。
ソリューションエクスプローラーで、[Test] プロジェクトノードを右クリックし、[参照の追加] をクリックして [参照の追加] ダイアログボックスを表示します。
[プロジェクト] タブをクリックします。 ctlClockLib プロジェクトが [プロジェクト名] の下に表示されます。 [ctlClockLib] をダブルクリックして、テストプロジェクトに参照を追加します。
ソリューションエクスプローラーで、Test を右クリックし、[ビルド] をクリックします。
ツールボックスで、[ctlClockLib コンポーネント] ノードを展開します。
[ctlAlarmClock] をダブルクリックして、ctlAlarmClock のインスタンスをフォームに追加します。
ツールボックスで、[DateTimePicker] を探してダブルクリックし、DateTimePicker コントロールをフォームに追加します。また、[Label] をダブルクリックして Label コントロールを追加します。
マウスを使用して、フォーム上で各コントロールを使いやすい位置に移動します。
コントロールのプロパティを次のように設定します。

コントロール

プロパティ

値

label1

Text

(空白)

Name

lblTest

dateTimePicker1

Name

dtpTest

Format

Time
デザイナーで、[dtpTest] をダブルクリックします。

コードエディターが開き、Private Sub dtpTest_ValueChanged が表示されます。

コントロール	プロパティ	値
label1	Text	(空白)
	Name	lblTest
dateTimePicker1	Name	dtpTest
	Format	Time

コードを次のように変更します。

[Visual Basic]

Private Sub dtpTest_ValueChanged(ByVal sender As Object, ByVal e As _
    System.EventArgs) Handles dtpTest.ValueChanged
    ctlAlarmClock1.AlarmTime = dtpTest.Value
    ctlAlarmClock1.AlarmSet = True
    lblTest.Text = "Alarm Time is " & Format(ctlAlarmClock1.AlarmTime, _
        "hh:mm")
End Sub

ソリューションエクスプローラーで、Test を右クリックし、[スタートアッププロジェクトに設定] をクリックします。
[デバッグ] メニューの [デバッグ開始] をクリックします。

テストプログラムが起動します。 ctlAlarmClock コントロールの現在時刻が更新され、DateTimePicker コントロールに開始時刻が表示されます。
DateTimePicker で分が表示されている部分をクリックします。
キーボードを使用して、ctlAlarmClock によって表示されている現在の時刻より 1 分後の値を設定します。

アラーム設定時刻は lblTest に表示されます。表示時刻がアラームの設定時刻になるまで待ちます。表示時刻がアラーム設定時刻になると、ビープ音が鳴り、lblAlarm が点滅します。
lblAlarm をクリックしてアラームを止めます。その後で、アラームを再び設定できます。

このチュートリアルでは、多数の重要な概念を扱いました。複合コントロールコンテナーにコントロールやコンポーネントを組み込んで複合コントロールを作成する方法を学びました。また、コントロールにプロパティを追加する方法や、カスタム機能を実装するコードを記述する方法も学びました。最後のセクションでは、継承によって特定の複合コントロールの機能を拡張し、オーバーライドによりホストのメソッドの機能を変更する方法を学びました。

参照

次の方法で共有

チュートリアル : Visual Basic による複合コントロールの作成

プロジェクトの作成

ctlClockLib コントロールライブラリおよび ctlClock コントロールを作成するには

複合コントロールへの Windows コントロールおよびコンポーネントの追加

複合コントロールに Label と Timer を追加するには

複合コントロールへのプロパティの追加

複合コントロールにプロパティを追加するには

コントロールのテスト

コントロールをテストするには

複合コントロールからの継承

継承コントロールを作成するには

アラームプロパティの追加

複合コントロールにプロパティを追加するには

コントロールのグラフィカルインターフェイスへの追加

ラベルコントロールを追加するには

アラーム機能の追加

ctlClock の Timer1_Tick メソッドをオーバーライドするには

アラームを止める手段を実装するには

フォームでの継承コントロールの使用

コントロールをビルドしてテストフォームに追加するには

参照

処理手順

概念

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : Visual Basic による複合コントロールの作成

プロジェクトの作成

ctlClockLib コントロール ライブラリおよび ctlClock コントロールを作成するには

複合コントロールへの Windows コントロールおよびコンポーネントの追加

複合コントロールに Label と Timer を追加するには

複合コントロールへのプロパティの追加

複合コントロールにプロパティを追加するには

コントロールのテスト

コントロールをテストするには

複合コントロールからの継承

継承コントロールを作成するには

アラーム プロパティの追加

複合コントロールにプロパティを追加するには

コントロールのグラフィカル インターフェイスへの追加

ラベル コントロールを追加するには

アラーム機能の追加

ctlClock の Timer1_Tick メソッドをオーバーライドするには

アラームを止める手段を実装するには

フォームでの継承コントロールの使用

コントロールをビルドしてテスト フォームに追加するには

参照

処理手順

概念

その他の技術情報

その他のリソース

ctlClockLib コントロールライブラリおよび ctlClock コントロールを作成するには

アラームプロパティの追加

コントロールのグラフィカルインターフェイスへの追加

ラベルコントロールを追加するには

コントロールをビルドしてテストフォームに追加するには