Windows Formsアプリに自作コントロールを追加する方法

2024年8月23日

このチュートリアルでは、Windows Formsアプリに自作の7セグメントデジタル数字表示コントロールを追加し、使用できるようにする手順を解説します。

注意）差し込まれているキャプチャー中のソリューション名や、ファイル名が文中の内容と一致していないところもあります。その場合、文中の内容を優先してください

1. 目標
2. 概要
3. 手順
4. 参考

目標

Visual Studioを使用して7セグメントデジタル表示用のカスタムコントロールを作成する。
作成したカスタムコントロールをツールボックスに追加し、他のプロジェクトで使用できるようにする。
コントロールをテストし、期待どおりに動作することを確認する。

概要

7セグメントLEDは、数字やアルファベットの一部を表示するために、7つのセグメントを点灯・消灯させて文字を表示する装置です。今回は、この7セグメント表示を模倣したカスタムコントロールを作成し、Windows Formsアプリケーションに追加します。

手順

1. プロジェクトの作成

Visual Studioを起動し、[新規作成] > [プロジェクト]を選択します。
[新しいプロジェクトの作成]ダイアログで、[Windows フォームコントロールライブラリ（.Net Framework）]テンプレートを選択します。
プロジェクト名に DigitControlLibrary、ソリューション名に SevenSegmentControl と入力し、[作成]をクリックします。

2. UserControlをカスタマイズする

ソリューションエクスプローラーで UserControl1.cs を右クリックし、[名前の変更]を選択して Digit7Seg.cs に変更します。
デザイナー画面に戻り、ツールボックスから2つの PictureBox コントロールをドラッグ＆ドロップして配置します。
両方の PictureBox の BackColor プロパティを DarkSlateGray に設定し、非表示状態を表現します。

この段階で実行するとユーザーコントロールテストコンテナーが表示されます

3. コントロールのコードを実装する

ソリューションエクスプローラーで Digit7Seg.cs を右クリックし、[コードの表示] を選択します。
次のコードを追加し、コントロールの動作を定義します。

using System.ComponentModel.Design;

[Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
public partial class Digit7Seg : UserControl
{
    public Digit7Seg()
    {
        InitializeComponent();
    }

    public void SetDigit(int digit)
    {
        switch (digit)
        {
            case 0:
                pictureBox1.BackColor = Color.DarkSlateGray;
                pictureBox2.BackColor = Color.DarkSlateGray;
                break;
            case 1:
                pictureBox1.BackColor = Color.LimeGreen;
                pictureBox2.BackColor = Color.DarkSlateGray;
                break;
            default:
                pictureBox1.BackColor = Color.DarkSlateGray;
                pictureBox2.BackColor = Color.DarkSlateGray;
                break;
        }
    }
}

4. コントロールのビルド

[ビルド] メニューから [ソリューションのビルド] を選択し、プロジェクトをビルドします。
ビルドが成功すると、Digit7Seg コントロールを含むDLLファイルが作成されます。

5. カスタムコントロールのテスト

Visual Studioを再度起動し、新しいプロジェクトを作成します。[Windows Formsアプリケーション]テンプレートを選択し、プロジェクト名に DigitSample を入力します。
作成した DigitSample プロジェクトに、先ほどビルドした Digit7Seg コントロールを追加します。
1. [ツール] メニューから [ツールボックスアイテムの選択] をクリックします。
2. [.NET Framework コンポーネント] タブで [参照] をクリックし、DigitControlLibrary.dll ファイルを選択します。
ツールボックスに Digit7Seg コントロールが追加されるので、これをフォームにドラッグ＆ドロップします。

6. コントロールの動作確認

Form1.cs のコードに以下を追加し、Digit7Seg コントロールが正しく動作するかを確認します。

public Form1()
{
    InitializeComponent();
    digit7Seg1.SetDigit(1); // 1を表示
}

プロジェクトを実行し、コントロールが意図したとおりに動作することを確認します。

7. 課題

基本課題

7セグメントLEDの残りの5つのセグメントを作成し、完全な数字表示を実現してください。
各セグメントの PictureBox を追加し、適切に配置してください。

応用課題

さらに、Open, Close, Playなどの文字表示もサポートするようにコントロールを拡張してみましょう。
カスタムメソッドやプロパティを追加し、コントロールを柔軟に扱えるようにしてください。

プロパティウィンドウで変更できるようにしてみましょう

コントロールのプロパティも表示、変更できるよう、自作してみましょう

Digit7Segクラスのブロックに追加します

int digit;
// プロパティウィンドウに表示される詳細メッセージと、カテゴリーが設定できます。
// Appearanceで、「表示」カテゴリーに表示されます。（実行して確認）
[Description("7セグメントに表示する数値"), Category("Appearance")]
public int Digit
{
    get
    {
        return digit;
    }
    set
    {
        digit = value;

        switch (digit)
        {
            case 0:
                pictureBox1.BackColor = Color.DarkSlateGray;
                pictureBox2.BackColor = Color.DarkSlateGray;
                break;
            case 1:
                pictureBox1.BackColor = Color.LimeGreen;
                pictureBox2.BackColor = Color.DarkSlateGray;
                break;
            case 2:
                pictureBox1.BackColor = Color.DarkSlateGray;
                pictureBox2.BackColor = Color.LimeGreen;
                break;
            default:
                break;
        }
    }
}