複数のユーザーコントロールを切り替えて表示する

複数のユーザーコントロールを切り替えて表示するコードを紹介します。

概要

こちらの記事では、ユーザーコントロールを作成してフォームに配置して利用するコードを紹介しました。この記事では、複数のユーザーコントロールを用意しユーザーコントロールの表示を切り替えるコードを紹介します。複数のユーザーコントロールの表示を切り替えることで、1つのウィンドウ内で画面の表示を切り替える処理をシンプルに実装できます。

プログラム例

UI

Windows Formアプリケーションを作成します。メインのフォームに加え、UserControlを3つ作成します。

ユーザーコントロールの名前は"UserContorl1", "UserControl2", "UserControl3" とします。

UserContorl1は下図のデザインとします。テキストボックスとボタンを配置します。

UserControl2は下図のデザインとします。プログレスバーとボタンを配置します。

UserControl3は下図のデザインとします。チェックボックスを配置します。

ビルドすると、ツールボックスにプロジェクト名のグループが追加され、UserContorl1, UserContorl2, UserContorl3

メインのフォームを作成します。ボタンを3つと、Panelを配置します。Panelの内部に UserContorl1, UserContorl2, UserContorl3 を配置します。

PanelのAnchor プロパティを Bottom, Left, Right, Top に設定します。

コード

下記のコードを記述します。

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 SwitchUserControl
{
  public partial class FormMain : Form
  {
    public FormMain()
    {
      InitializeComponent();

      userControl11.Visible = true;
      userControl11.Dock = DockStyle.Fill;

      userControl21.Visible = false;
      userControl31.Visible = false;
    }

    private void button1_Click(object sender, EventArgs e)
    {
      userControl21.Visible = false;
      userControl31.Visible = false;

      userControl11.Visible = true;
      userControl11.Dock = DockStyle.Fill;
    }

    private void button2_Click(object sender, EventArgs e)
    {
      userControl11.Visible = false;
      userControl31.Visible = false;

      userControl21.Visible = true;
      userControl21.Dock = DockStyle.Fill;

    }

    private void button3_Click(object sender, EventArgs e)
    {
      userControl11.Visible = false;
      userControl21.Visible = false;

      userControl31.Visible = true;
      userControl31.Dock = DockStyle.Fill;
    }
  }
}

解説

フォームの初期表示時に下記のコードが実行されます。フォームに設置したuserControl1のVisibleプロパティをtrueに設定し画面に表示します。また、DockプロパティをDockStyle.Fillに設定することで、PanelいっぱいにuserControl1を表示します。userControl2, userControl3 はVisible プロパティをfalseに設定し非表示にします。

  userControl11.Visible = true;
  userControl11.Dock = DockStyle.Fill;

  userControl21.Visible = false;
  userControl31.Visible = false;

Button1, Button2, Button3 のクリックイベントは下記になります。
Button1がクリックされた場合は、userControl1を表示し、userControl2, userControl3を非表示にします。同様に、Button2がクリックされた場合は、userControl2を表示し、userControl1, userControl3を非表示にします。Button3がクリックされた場合は、userControl3を表示し、userControl1, userControl2を非表示にします。userControlの表示時には、DockプロパティをDockStyle.Fillに指定し、Panel1 いっぱいにuserControlを表示します。

private void button1_Click(object sender, EventArgs e)
{
  userControl21.Visible = false;
  userControl31.Visible = false;

  userControl11.Visible = true;
  userControl11.Dock = DockStyle.Fill;
}

private void button2_Click(object sender, EventArgs e)
{
  userControl11.Visible = false;
  userControl31.Visible = false;

  userControl21.Visible = true;
  userControl21.Dock = DockStyle.Fill;
}

private void button3_Click(object sender, EventArgs e)
{
  userControl11.Visible = false;
  userControl21.Visible = false;

  userControl31.Visible = true;
  userControl31.Dock = DockStyle.Fill;
}