【C#】WindowsFormsアプリでUserControlの簡単なサンプル

2024年3月1日

UserControlとは

WindowsフォームアプリケーションにおけるUserControl(ユーザーコントロール)は、再利用可能なカスタムなGUI要素を作成するための機能です。これは、複数のフォームやコントロール内で同じ機能やデザインを使用する場合に便利です。UserControlを使用することで、特定の機能を持った独自のカスタムコントロールを作成し、それをプロジェクト内で再利用できます

UserControlは、Windowsフォームアプリケーション内で作成される特別なコンテナコントロールです。これは、通常のフォームと同様に、ボタン、テキストボックス、ラベルなどの標準的なコントロールを配置できます。ただし、これらのコントロールが組み合わさって独自のカスタムコントロールを形成します

UserControlを作成は、次の手順で行います

  1. Visual Studioなどの開発環境を使用して、Windowsフォームアプリケーションプロジェクトを作成します
  2. ソリューションエクスプローラー内で、プロジェクトにUserControlを追加します
  3. UserControlデザイナを使用して、コントロール上に必要なコントロールやデザイン要素を配置します
  4. UserControl内で必要なプロパティやイベントを定義します。これにより、UserControlの外部からコントロールを操作できるようになります
  5. UserControlをプロジェクトのフォームや他のコントロールに配置して使用します

UserControlの主な利点は、コードの再利用と保守性の向上です。特定の機能やデザインパターンをUserControlにカプセル化することで、同じ機能を複数の場所で簡単に利用できるようになります。また、UserControlごとにコードとデザインをまとめて管理できるため、変更が必要な場合も容易に対応できます

例えば、ボタンやテキストボックス、ラベルを組み合わせてカスタムな入力フォームを作成し、これを複数のフォームで利用することができます。また、UserControl内で独自のイベントやプロパティを定義して、コントロールの動作をカスタマイズすることも可能です

新規ソリューションの作成します

ソリューション名、プロジェクト名をUserContolSimpleSampleで作成します

自作のコントロールを作成します

ソリューションエクスプローラー内で、プロジェクトにUserControlを追加します

0:00-0:20 プロジェクトを選択してマウス右クリックメニューから作成します コントロール名
(クラス名はPlayerにします)

UserControlデザイナを使用して、コントロール上に必要なコントロールやデザイン要素を配置します

0:20-0:31 Formデザイナと同様な操作で複数のコントロールを配置することができます

コードを記述します

ボタンをクリックした時に、ラベルが変化するようにサンプルコードを記述します
追加部分は、次の部分だけです

label1.Text = "Hello, World";

手順は動画を参考にしてください

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace UserContolSimpleSample
{
    public partial class Player : UserControl
    {
        public Player()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            label1.Text = "Hello, World";
        }
    }
}

自作のコントロールを使えるようにします

ツールボックス🧰で使えるようにします

0:00-0:06 メニューからソリューションをビルドすると、ツールボックスに表示されるようになります

ツールボックスからフォームデザイナにドラッグ&ドロップして配置します

0:06-0:14 LabelやButtonのように配置できるようになります

実行結果

0:14-0:20 LabelやButtonのように配置できるようになります

0:20-0:37 2つめの自作コントロールも配置してみて実行できることを確認しましょう

(参考)自作コントロールのプロパティウィンドウのカスタマイズ