【学習】WinFormsでTabControlを使ってみよう(タブで画面を切り替える)

広告

これまでの学習では、

  • 1つのフォームにコントロールを配置する
  • ボタンやラベルで操作する

という形でプログラムを動かしてきました。

しかし、設定項目が増えたり、複数の画面を1つのアプリにまとめたい場面があります。

タブで画面を切り替える

という仕組みです。

今回は TabControl(タブコントロール) を使って、複数の画面を1つのフォームにまとめるアプリを作ります。

今日作るもの

基本 と 詳細 の2つのタブがあり、

  • 基本 タブ:名前を入力する TextBox と Label
  • 詳細 タブ:メモを入力する TextBox

を切り替えて使えます。タブをクリックするだけで画面が切り替わります。


ソリューションとプロジェクトを作る

Visual Studio で新しいプロジェクトを作ります。

  • テンプレート: Windows Forms アプリ (.NET Framework)
  • ソリューション名: TabSample
  • プロジェクト名: TabControlDemo

作成すると Form1 が表示されます。


フォームに配置するコントロール

  1. TabControl をフォームに配置する
  2. TabControl を選択した状態で、プロパティの TabPages をクリック
  3. コレクションエディタで「追加」を2回押し、2つのタブを作る
  4. 1つ目のタブの Text を「基本」、2つ目のタブの Text を「詳細」に設定

各タブの中に、次のコントロールを配置します。

基本タブの中

コントロール名前
LabelnameLabel
TextBoxnameTextBox

詳細タブの中

コントロール名前
LabelmemoLabel
TextBoxmemoTextBox

nameLabel の Text を「名前」、memoLabel の Text を「メモ」に設定します。


TabControlの仕組み

  • TabControl … タブの親コンテナ
  • TabPage … 各タブの内容(クリックで表示が切り替わる)
  • SelectedIndex … 現在選択されているタブの番号(0から開始)
  • SelectedIndexChanged … タブが切り替わったときに発生するイベント

イベントを登録する(任意)

タブが切り替わったときに処理したい場合は、TabControl の SelectedIndexChanged イベントを使います。

private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (tabControl1.SelectedIndex == 0)
    {
        // 基本タブが選ばれた
    }
    else if (tabControl1.SelectedIndex == 1)
    {
        // 詳細タブが選ばれた
    }
}

完成コード(タブ切り替え時の表示例)

タブを切り替えると、フォームのタイトルバーに現在のタブ名を表示する例です。

using System;
using System.Windows.Forms;

namespace TabControlDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string tabName = tabControl1.SelectedTab.Text;
            this.Text = $"タブサンプル - {tabName}";
        }
    }
}

フォームのタイトルバーに、選択中のタブ名が表示されます。


プログラムの流れ

タブをクリック
        ↓
SelectedIndexChanged が発生
        ↓
SelectedTab で現在のタブを取得
        ↓
SelectedTab.Text でタブ名を取得
        ↓
フォームのタイトルを更新

重要ポイント

TabControl は「複数画面を1つにまとめる」 コントロールです。

  • TabPage を追加すると、タブが増える
  • 各 TabPage の中にコントロールを配置する
  • SelectedIndex で現在のタブ番号を取得(0, 1, 2…)
  • SelectedTab で現在の TabPage を取得
  • 設定画面、マルチページフォームでよく使う

発展:タブをコードで追加する

実行時にタブを追加する例です。

var newTab = new TabPage("新規タブ");
newTab.Controls.Add(new Label { Text = "動的に追加したタブ" });
tabControl1.TabPages.Add(newTab);

発展アイデア

TabControl を使うと次のようなものも作れます。

  • 設定画面(基本設定 / 詳細設定 / その他)
  • マルチステップフォーム(ステップ1 / ステップ2 / 確認)
  • データ入力画面(個人情報 / 連絡先 / 備考)
  • ツールボックス風アプリ(ツール1 / ツール2)

TabControl は画面を整理するための基本コントロールです。

訪問数 2 回, 今日の訪問数 2回

広告