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

#概要

タブコントロールを使わずにボタンとパネルで表示の切替をするサンプル。
タブの大きさとか色とか自由に変えられるのでタブコントロールよりも使いやすいことも。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/6a3161e4-bf44-672b-a9bd-d578dbe09b0a.png)

* 環境・バージョン
  + VisualStudio2017


#手順

## １．デザイナで画面作成

パネルとボタンを３つ作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/22e368b3-68e9-72ef-707e-b6239bc52500.png)

パネルを重ねる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/994c4cc0-b961-1316-ba0c-14a1be0cccc0.png)
↑　パネル3の下にパネル1とパネル2がある状態。


## ２．ソース

タブ（ボタン）の数が増えても同じことを繰り返し書かなくて済むように、
・ボタンとパネルの組み合わせをDictionaryに登録して、foreachで処理
・各ボタンのクリックイベントをすべて同じ処理に紐づけ（Button_Click）
したところがポイント。

```C#: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をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/7e41e792-a476-59da-59a4-df6670f18c12.png)

ボタン2をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/41b41611-b3fc-39fd-8ac4-aabca6cf32e0.png)

ボタン3をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/3c319c21-e9bb-54be-a14a-9dab3c871f20.png)

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

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

パネル1、パネル2のコントロールをデザイナで触りたいというときに、パネル3の下にあって触れない・・・！
そんなときはデザイナのソースを触っちゃいます。

```C#:Form1.Designer.cs（抜粋）

// 行の順番を変えるとデザイナ上のパネルの表示順が変わる
this.Controls.Add(this.panel3);
this.Controls.Add(this.panel2);
this.Controls.Add(this.panel1);
```

他にもっといい方法があるのかな？？

（追記）albireoさんにコメント欄で教えていただきました。
デザイナのパネル上で右クリックして「最背面へ移動」をすると簡単にパネルの表示順を変えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/568592/933a8776-c72f-2f56-1cef-cf56b3ac3002.png)



#タブの数が増えても大丈夫

タブ（ボタン）が増えてもボタンとパネルの組み合わせを登録するだけでOK。

```C#:Form1.cs
// 例：button1をクリックしたらpanel1を表示
_dic.Add(this.button1, this.panel1);
```

#良くない例
下記のようにボタンごとに処理を書いちゃうと大変なことに・・・(((( ；ﾟДﾟ)))

```C#: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;
}
```