【C#】タブコントロールを使わずにボタンとパネルで表示の切替をするサンプル

概要

タブコントロールを使わずにボタンとパネルで表示の切替をするサンプル。
タブの大きさとか色とか自由に変えられるのでタブコントロールよりも使いやすいことも。

• 環境・バージョン
  • VisualStudio2017

手順

１．デザイナで画面作成

パネルとボタンを３つ作成する。

パネルを重ねる。

↑　パネル3の下にパネル1とパネル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;
            }
        }
    }
}

３．動かしてみる

ボタン1をクリック

ボタン2をクリック

ボタン3をクリック

ボタンクリックで表示切替ができました。

４．下にあるパネルをデザイナで触りたい場合

パネル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;
}