#概要
タブコントロールを使わずにボタンとパネルで表示の切替をするサンプル。
タブの大きさとか色とか自由に変えられるのでタブコントロールよりも使いやすいことも。
- 環境・バージョン
- VisualStudio2017
#手順
1.デザイナで画面作成
パネルを重ねる。
↑ パネル3の下にパネル1とパネル2がある状態。
2.ソース
タブ(ボタン)の数が増えても同じことを繰り返し書かなくて済むように、
・ボタンとパネルの組み合わせをDictionaryに登録して、foreachで処理
・各ボタンのクリックイベントをすべて同じ処理に紐づけ(Button_Click)
したところがポイント。
Form1.cs
public partial class Form1 : Form
{
Dictionary<Button, Panel> _dic = new Dictionary<Button, Panel>();
public Form1()
{
InitializeComponent();
// ボタンとパネルの組み合わせを登録
_dic.Add(this.button1, this.panel1);
_dic.Add(this.button2, this.panel2);
_dic.Add(this.button3, this.panel3);
// ボタンのクリックイベント登録
AddEvent();
// 画面初期表示時はボタン1を選択
SelectPanel(this.button1);
}
/// <summary>
/// イベントハンドラ紐づけ
/// </summary>
private void AddEvent()
{
foreach (KeyValuePair<Button, Panel> pair in _dic)
{
Button button = pair.Key;
button.Click += new System.EventHandler(this.Button_Click);
}
}
/// <summary>
/// ボタンクリックイベント
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Button_Click(object sender, EventArgs e)
{
Button button = (Button)sender;
SelectPanel(button);
}
/// <summary>
/// 表示を切り替え
/// </summary>
/// <param name="selectedButton">選択したボタン</param>
private void SelectPanel(Button selectedButton)
{
foreach (KeyValuePair<Button, Panel> pair in _dic)
{
Button button = pair.Key;
Panel panel = pair.Value;
if (button.Equals(selectedButton))
{
// 選択時
button.BackColor = Color.DarkBlue;
button.ForeColor = Color.White;
panel.Visible = true;
}
else
{
// 選択されていない時
button.BackColor = Color.Gray;
button.ForeColor = Color.Black;
panel.Visible = false;
}
}
}
}
3.動かしてみる
ボタンクリックで表示切替ができました。
4.下にあるパネルをデザイナで触りたい場合
パネル1、パネル2のコントロールをデザイナで触りたいというときに、パネル3の下にあって触れない・・・!
そんなときはデザイナのソースを触っちゃいます。
Form1.Designer.cs(抜粋)
// 行の順番を変えるとデザイナ上のパネルの表示順が変わる
this.Controls.Add(this.panel3);
this.Controls.Add(this.panel2);
this.Controls.Add(this.panel1);
他にもっといい方法があるのかな??
(追記)albireoさんにコメント欄で教えていただきました。
デザイナのパネル上で右クリックして「最背面へ移動」をすると簡単にパネルの表示順を変えられます。
#タブの数が増えても大丈夫
タブ(ボタン)が増えてもボタンとパネルの組み合わせを登録するだけでOK。
Form1.cs
// 例:button1をクリックしたらpanel1を表示
_dic.Add(this.button1, this.panel1);
#良くない例
下記のようにボタンごとに処理を書いちゃうと大変なことに・・・(((( ;゚Д゚)))
Form1.cs
// ボタン1をクリック
private void button1_Click(object sender, EventArgs e)
{
// パネル1を表示
button1.BackColor = Color.DarkBlue;
button1.ForeColor = Color.White;
panel1.Visible = true;
// パネル2を非表示
button2.BackColor = Color.Gray;
button2.ForeColor = Color.Black;
panel2.Visible = false;
// パネル3を非表示
button3.BackColor = Color.Gray;
button3.ForeColor = Color.Black;
panel3.Visible = false;
}