複数のユーザーコントロールを切り替えて表示するコードを紹介します。
こちらの記事では、ユーザーコントロールを作成してフォームに配置して利用するコードを紹介しました。この記事では、複数のユーザーコントロールを用意しユーザーコントロールの表示を切り替えるコードを紹介します。複数のユーザーコントロールの表示を切り替えることで、1つのウィンドウ内で画面の表示を切り替える処理をシンプルに実装できます。
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;
}
プロジェクトを実行すると下図のウィンドウが表示されます。3つのボタンの下に配置したPanel内は、userContorl1が表示されます。
[button2]をクリックします。ボタンの下部のPanelの表示内容がuserControl2のものに変わります。
同様に[button3]をクリックすると、下部のPanelの表示内容がuserControl3のものに変わります。
[button1]をクリックすると、userControl1の内容に変わります。
userControlは表示、非表示が切り替わるだけのため、テキストボックスに入力されて文字列は、他のuserControlに切り替えた後で元のuserContorlに戻ってきた場合、テキストボックスに入力された文字列は保持された状態になります。
別のuserControlを表示した後で元のuserControlを表示すると、もともとテキストボックスに入力されていた「ぺんぎん」の文字列は保持された状態のままとなっています。
