ユーザーコントロールを作成する方法

この記事では、プロジェクトにユーザーコントロールを追加し、そのユーザーコントロールをフォームに追加する方法について説明します。魅力的なビジュアルと機能を備え、再利用可能なユーザーコントロールを作成します。新しいコントロールは、TextBox コントロールと Button コントロールをグループ分けします。ユーザーがボタンを選択すると、テキストボックス内のテキストがクリアされます。ユーザーコントロールの詳細については、「ユーザーコントロールの概要」を参照してください。

ユーザーコントロールコンシューマーについて

この記事全体を通して、 コンシューマー という用語は、ユーザーコントロールを使用するすべてのコードを指します。これには次のものが含まれます。

ユーザーコントロールを含むフォーム。
他のコントロールがユーザーコントロールをホストします。
ユーザーコントロールライブラリを参照するアプリケーション。

ユーザーコントロールを作成すると、再利用可能なコンポーネントが構築されます。コンシューマーは、フォームにコンポーネントを配置したり、プロパティを設定したり、イベントに応答したりして、そのコンポーネントを使用するユーザーです。コンシューマーは、ユーザーコントロールを構成する内部コントロール ( TextBox や Buttonなど) について知る必要はありません。これらは、公開することを選択したプロパティとイベントとのみ対話します。

ユーザーコントロールに不可欠なコードパターン

詳細な実装を追加する前に、ユーザーコントロールの実行可能な最小限のコードパターンを理解しておくと役立ちます。その中核となるユーザーコントロールには、次の機能が必要です。

イベント転送 - 内部コントロールからコンシューマーにイベントを渡します。
プロパティの公開 - コンシューマーが内部コントロールプロパティにアクセスできるようにします。
論理動作 - 内部コントロール間の相互作用を処理します。

次のコードは、これらのパターンを示しています。基本的なユーザーコントロールにこのコードはすべて必要ありませんが、これらのパターンは、デザイナーおよびコンシューマーアプリケーションとうまく統合される、プロフェッショナルで再利用可能なコンポーネントを作成するのに役立ちます。

新しいユーザーコントロールを追加する

Visual Studio でWindows フォームプロジェクトを開いた後、Visual Studio テンプレートを使用してユーザーコントロールを作成します。

Visual Studio で、[ ソリューションエクスプローラー ] ウィンドウを見つけます。プロジェクトを右クリックして、[追加]>[ユーザーコントロール]\(Windows フォーム) を選択します。
コントロールの Name を ClearableTextBox に設定し、 Add キーを押します。

ユーザーコントロールが作成されると、Visual Studio がデザイナーを開きます。

Visual Studio for Windows Forms のユーザーコントロールデザイナー

クリア可能なテキストボックスを設計する

ユーザーコントロールは、フォームの設計方法と同様に、デザインサーフェイスで作成するコントロールである内在コントロールで構成されます。ユーザーコントロールとその内在コントロールを追加して構成するには、次の手順に従います。

デザイナーを開いた状態で、ユーザーコントロールのデザインサーフェイスを選択したオブジェクトにする必要があります。そうでない場合は、デザインサーフェスをクリックして選択します。 [プロパティ] ウィンドウで、次のプロパティを設定します。

プロパティ価値

最小サイズ 84, 53

サイズ 191, 53
Label コントロールを追加します。次のようにプロパティを設定します。

プロパティ価値

名前 lblTitle

ロケーション 3, 5
TextBox コントロールを追加します。次のようにプロパティを設定します。

プロパティ価値

名前 txtValue

錨 Top, Left, Right

ロケーション 3, 23

サイズ 148, 23
Button コントロールを追加します。次のようにプロパティを設定します。

プロパティ価値

名前 btnClear

錨 Top, Right

ロケーション 157, 23

サイズ 31, 23

テキスト ↻

コントロールは次の画像のようになります。
F7 キーを押して、ClearableTextBox クラスのコードエディターを開きます。

プロパティ	価値
最小サイズ	`84, 53`
サイズ	`191, 53`

プロパティ	価値
名前	`lblTitle`
ロケーション	`3, 5`

プロパティ	価値
名前	`txtValue`
錨	`Top, Left, Right`
ロケーション	`3, 23`
サイズ	`148, 23`

プロパティ	価値
名前	`btnClear`
錨	`Top, Right`
ロケーション	`157, 23`
サイズ	`31, 23`
テキスト	`↻`

次のコード変更を行います。

コードファイルの先頭で System.ComponentModel 名前空間をインポートします。
クラスに DefaultEvent 属性を追加します。この属性は、コンシューマー (このコントロールを使用するフォームまたはアプリケーション) がデザイナーでコントロールをダブルクリックしたときに生成されるイベントを設定します。属性の詳細については、「属性 (C#)」または「属性の概要 (Visual Basic)」を参照してください。
```
using System.ComponentModel;

namespace UserControlProject
{
    [DefaultEvent(nameof(TextChanged))]
    public partial class ClearableTextBox : UserControl
```
```
Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox
```
TextBox.TextChanged イベントをユーザーコントロールのコンシューマーに転送するイベントハンドラーを追加します。
```
[Browsable(true)]
public new event EventHandler? TextChanged
{
    add => txtValue.TextChanged += value;
    remove => txtValue.TextChanged -= value;
}
```
```
<Browsable(True)>
Public Shadows Custom Event TextChanged As EventHandler
    AddHandler(value As EventHandler)
        AddHandler txtValue.TextChanged, value
    End AddHandler
    RemoveHandler(value As EventHandler)
        RemoveHandler txtValue.TextChanged, value
    End RemoveHandler
    RaiseEvent(sender As Object, e As EventArgs)

    End RaiseEvent
End Event
```
イベントで Browsable 属性が宣言されていることに注意してください。 Browsable がイベントまたはプロパティに適用されている場合、デザイナーでコントロールを選択したときに、項目を [プロパティ] ウィンドウに表示するかどうかを制御します。この場合、イベントを表示する必要があることを示す属性に true がパラメーターとして渡されます。

ユーザーコントロールのコンシューマーに TextBox.Text プロパティを公開する、Textという名前の文字列プロパティを追加します。

[Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}

<Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property

ユーザーコントロールのコンシューマーに Label.Text プロパティを公開する、Titleという名前の文字列プロパティを追加します。

[Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}

<Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Property Title() As String
    Get
        Return lblTitle.Text
    End Get
    Set(value As String)
        lblTitle.Text = value
    End Set
End Property

ClearableTextBox デザイナーに戻り、btnClear コントロールをダブルクリックして Click イベントのハンドラーを生成します。ハンドラーに次のコードを追加します。これにより、次の txtValue テキストボックスがクリアされます。
```
private void btnClear_Click(object sender, EventArgs e) =>
    Text = "";
```
```
Private Sub btnClear_Click(sender As Object, e As EventArgs)
    txtValue.Text = ""
End Sub
```
最後に、[ソリューションエクスプローラー] ウィンドウでプロジェクトを右クリックし、[ビルド] を選択してプロジェクトをビルドします。エラーが発生しないようにし、ビルドが完了すると、ClearableTextBox コントロールがツールボックスに表示され、使用できるようになります。

次の手順では、フォームでコントロールを使用します。

サンプルアプリケーション

前のセクションで新しいプロジェクトを作成した場合は、Formという名前の空のがあります。それ以外の場合は、新しいフォームを作成します。

ソリューションエクスプローラー ウィンドウで、フォームをダブルクリックしてデザイナーを開きます。フォームのデザイン画面を選択する必要があります。
フォームの Size プロパティを 432, 315に設定します。
Toolbox ウィンドウを開き、ClearableTextBox コントロールをダブルクリックします。このコントロールは、プロジェクト後に名前が付けられたセクションの下に一覧表示されます。
ここでも、 ClearableTextBox コントロールをダブルクリックして、2 つ目のコントロールを生成します。
デザイナーに戻り、両方のコントロールを表示できるようにコントロールを分離します。
コントロールを 1 つ選択し、次のプロパティを設定します。

プロパティ価値

名前 ctlFirstName

ロケーション 12, 12

サイズ 191, 53

タイトル First Name
他のコントロールを 1 つ選択し、次のプロパティを設定します。

プロパティ価値

名前 ctlLastName

ロケーション 12, 71

サイズ 191, 53

タイトル Last Name
ツールボックス ウィンドウに戻り、フォームにラベルコントロールを追加し、次のプロパティを設定します。

プロパティ価値

名前 lblFullName

ロケーション 12, 252
次に、2 つのユーザーコントロールのイベントハンドラーを生成する必要があります。デザイナーで、ctlFirstName コントロールをダブルクリックします。このアクションにより、TextChanged イベントのイベントハンドラーが生成され、コードエディターが開きます。
デザイナーに戻り、ctlLastName コントロールをダブルクリックして、2 番目のイベントハンドラーを生成します。
デザイナーに戻り、フォームのタイトルバーをダブルクリックします。このアクションにより、Load イベントのイベントハンドラーが生成されます。

プロパティ	価値
名前	`ctlFirstName`
ロケーション	`12, 12`
サイズ	`191, 53`
タイトル	`First Name`

プロパティ	価値
名前	`ctlLastName`
ロケーション	`12, 71`
サイズ	`191, 53`
タイトル	`Last Name`

プロパティ	価値
名前	`lblFullName`
ロケーション	`12, 252`

コードエディターで、UpdateNameLabel という名前のメソッドを追加します。このメソッドは、両方の名前を組み合わせてメッセージを作成し、メッセージを lblFullName コントロールに割り当てます。

private void UpdateNameLabel()
{
    if (string.IsNullOrWhiteSpace(ctlFirstName.Text) || string.IsNullOrWhiteSpace(ctlLastName.Text))
        lblFullName.Text = "Please fill out both the first name and the last name.";
    else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day.";
}

Private Sub UpdateNameLabel()
    If String.IsNullOrWhiteSpace(ctlFirstName.Text) Or String.IsNullOrWhiteSpace(ctlLastName.Text) Then
        lblFullName.Text = "Please fill out both the first name and the last name."
    Else
        lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day."
    End If
End Sub

どちらの TextChanged イベントハンドラーも次の UpdateNameLabel メソッドを呼び出します。

private void ctlFirstName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

private void ctlLastName_TextChanged(object sender, EventArgs e) =>
    UpdateNameLabel();

Private Sub ctlFirstName_TextChanged(sender As Object, e As EventArgs) Handles ctlFirstName.TextChanged
    UpdateNameLabel()
End Sub

Private Sub ctlLastName_TextChanged(sender As Object, e As EventArgs) Handles ctlLastName.TextChanged
    UpdateNameLabel()
End Sub

最後に、フォームの UpdateNameLabel イベントから Load メソッドを呼び出します。

private void Form1_Load(object sender, EventArgs e) =>
    UpdateNameLabel();

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    UpdateNameLabel()
End Sub

次のプロジェクトを実行し、姓と名を入力します。

ユーザーコントロールから作成された 2 つのテキストボックスとラベルが含まれた Windows フォームアプリです。

↻ ボタンを押して、テキストボックスの 1 つをリセットしてみてください。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-06-30

次の方法で共有

ユーザー コントロールを作成する方法

ユーザー コントロール コンシューマーについて

ユーザー コントロールに不可欠なコード パターン

新しいユーザー コントロールを追加する

クリア可能なテキスト ボックスを設計する

サンプル アプリケーション