VisualStudioでユーザーコントロールの作り方紹介

公開日：2023.09.08　更新日：2023.09.08

tag: Windows

こんにちは、motoKNです。

ユーザーコントロールを使用したプロジェクト(VisualStudio)を触る機会がありました。これまで私自身ユーザーコントロールを使用して開発する事がありませんでした。そのため作り方を確認しましたのでご紹介したいと思います。

ユーザーコントロールとは

用意されているWindowsフォームコントロールを組み合わせて独自のコントロールを作成したり、コントロール全体をパッケージ化してアプリケーション間で再利用したりすることができます。

詳しくは公式より

今回作成するモノ

Timerクラスを使用して、一定周期で数値とコントロールの色が変わるサンプルプログラムを作成します

ユーザーコントロールの作成(C#)

Windows フォームアプリケーションのプロジェクトが準備されている状態から説明します。

プロジェクトを右クリックして [追加] を押下し、「新しい項目の追加」からユーザーコントロールを選択します。

追加したユーザーコントロールのデザイナーが表示されるので標準コントロールを配置していきます。

コントロール	名称	説明
パネル	panel3	数値66以上：緑色数値66未満：コントロール色
パネル	panel2	数値66以上：緑色数値33以上66未満：黄色数値33未満：コントロール色
パネル	panel1	数値66以上：緑色数値33以上66未満：黄色数値33未満：赤色
ラベル	lblNumValue	ランダムな数値表示

Form1のデザイナーを表示し、ツールボックスから作成したユーザーコントロールを選択し、Form1に追加します。

Form1のデザイナーを表示しプロパティからイベント「Load」を追加する

Form1のコードを編集する

using System;
using System.Windows.Forms;

namespace UserControl_Practice
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            UserCtr userCtr = new UserCtr();    // 作成したユーザーコントロールのインスタンス
        }
    }
}

ユーザーコントロールのコードを編集する

using System;
using System.Drawing;
using System.Windows.Forms;

namespace UserControl_Practice
{
    public partial class UserCtr : UserControl
    {

        private int value = 0;                              // 1秒ごとに変化する数値
        private Color panelColor1 = SystemColors.Control;   // panel1の表示色
        private Color panelColor2 = SystemColors.Control;   // panel2の表示色
        private Color panelColor3 = SystemColors.Control;   // panel3の表示色
        private Timer timer = new Timer();                  // 一定間隔でイベント発生

        public UserCtr()
        {
            InitializeComponent();

            // タイマーの初期化
            timer.Interval = 1000;         // 1秒ごとに値と表示色を更新
            timer.Tick += RandomNum_proc;  // 1秒ごとに実行される処理
            timer.Start();                 // タイマー開始
        }

        private void RandomNum_proc(object sender, EventArgs e)
        {
            int randomValue = new Random().Next(0, 101); // 0～100のランダムな値を設定

            // ラベルの数値を更新
            if (randomValue < 0)
            {
                value = 0;
            }
            else if (randomvalue > 100)
            {
                value = 100;
            }
            else
            {
                value = randomValue;
            }

            // パネルの表示色設定
            if (randomValue < 33)
            {
                panelColor1 = Color.Red;
                panelColor2 = SystemColors.Control;
                panelColor3 = SystemColors.Control;
            }
            else if (randomValue < 66)
            {
                panelColor1 = Color.Yellow;
                panelColor2 = Color.Yellow;
                panelColor3 = SystemColors.Control;
            }
            else
            {
                panelColor1 = Color.Green;
                panelColor2 = Color.Green;
                panelColor3 = Color.Green;
            }
            UpdateUI();
        }
        
        // ユーザーコントロール画面更新
        private void UpdateUI()
        {
            // ラベル表示
            lblNumVal.Text = value.ToString();

            // パネル表示
            panel1.BackColor = panelColor1;
            panel2.BackColor = panelColor2;
            panel3.BackColor = panelColor3;
        }
    }
}