1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-30

#概要

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

  • 環境・バージョン
    • VisualStudio2017

#手順

1.デザイナで画面作成

パネルとボタンを3つ作成する。
image.png

パネルを重ねる。
image.png
↑ パネル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.動かしてみる

ボタン1をクリック
image.png

ボタン2をクリック
image.png

ボタン3をクリック
image.png

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

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

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

Form1.Designer.cs(抜粋)

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

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

(追記)albireoさんにコメント欄で教えていただきました。
デザイナのパネル上で右クリックして「最背面へ移動」をすると簡単にパネルの表示順を変えられます。
image.png

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

タブ(ボタン)が増えてもボタンとパネルの組み合わせを登録するだけで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;
}
1
5
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?