ユーザーコントロールを作成する方法 (Windows Forms .NET)

[アーティクル]
10/26/2023

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

重要

.NET 7 と .NET 6 用のデスクトップガイドドキュメントは作成中です。

プロジェクトにユーザーコントロールを追加する

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

Visual Studio で [プロジェクトエクスプローラー] ウィンドウを見つけます。プロジェクトを右クリックして、[追加]>[ユーザーコントロール]\(Windows Forms) を選択します。
コントロールの [名前] を [クリア可能]TextBox に設定し、[追加] を押します。

ユーザーコントロールが作成されると、次のデザイナーによって Visual Studio が開きます。

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

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

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

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

プロパティ値

MinimumSize 84, 53

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

Property 値

名前 lblTitle

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

Property 値

名前 txtValue

アンカー Top, Left, Right

場所 3, 23

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

Property 値

名前 btnClear

アンカー Top, Right

場所 157, 23

サイズ 31, 23

Text ↻

コントロールは次の画像のようになります。
F7 キーを押して、ClearableTextBox クラスのコードエディターを開きます。
次のコード変更を行います。
1. コードファイルの先頭で System.ComponentModel 名前空間をインポートします。
2. クラスに DefaultEvent 属性を追加します。この属性では、デザイナーでコントロールをダブルクリックしたときにコンシューマーによって生成されるイベントが設定されます。コンシューマーは、このコントロールを宣言して使用するオブジェクトのことです。
```
using System.ComponentModel;

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

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox
```
3. 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 がパラメーターとして渡されます。
4. Text という名前の文字列プロパティを追加します。これにより、TextBox.Text プロパティが次のコンシューマーに転送されます。
```
[Browsable(true)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}
```
```
<Browsable(True)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property
```
5. Title という名前の文字列プロパティを追加します。これにより、Label.Text プロパティが次のコンシューマーに転送されます。
```
[Browsable(true)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}
```
```
<Browsable(True)>
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 コントロールがツールボックスに表示され、使用できるようになります。

プロパティ	値
MinimumSize	`84, 53`
[サイズ]	`191, 53`

Property	値
名前	`lblTitle`
場所	`3, 5`

Property	値
名前	`txtValue`
アンカー	`Top, Left, Right`
場所	`3, 23`
[サイズ]	`148, 23`

Property	値
名前	`btnClear`
アンカー	`Top, Right`
場所	`157, 23`
サイズ	`31, 23`
Text	`↻`

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

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

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

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

プロパティ値

名前 ctlFirstName

場所 12, 12

[サイズ] 191, 53

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

プロパティ値

名前 ctlLastName

場所 12, 71

[サイズ] 191, 53

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

プロパティ値

名前 lblFullName

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

プロパティ	値
名前	`ctlFirstName`
場所	`12, 12`
[サイズ]	`191, 53`
Title	`First Name`

プロパティ	値
名前	`ctlLastName`
場所	`12, 71`
[サイズ]	`191, 53`
Title	`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

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

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 Forms アプリ。

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

ユーザーコントロールを作成する方法 (Windows Forms .NET)

プロジェクトにユーザーコントロールを追加する

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

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

フィードバック

フィードバック

その他のリソース

ユーザー コントロールを作成する方法 (Windows Forms .NET)

プロジェクトにユーザー コントロールを追加する

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

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

フィードバック

フィードバック

その他のリソース

ユーザーコントロールを作成する方法 (Windows Forms .NET)

プロジェクトにユーザーコントロールを追加する

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

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