【学習】WinFormsでTabControlを使ってみよう(タブで画面を切り替える)
これまでの学習では、
- 1つのフォームにコントロールを配置する
- ボタンやラベルで操作する
という形でプログラムを動かしてきました。
しかし、設定項目が増えたり、複数の画面を1つのアプリにまとめたい場面があります。
タブで画面を切り替える
という仕組みです。
今回は TabControl(タブコントロール) を使って、複数の画面を1つのフォームにまとめるアプリを作ります。
今日作るもの
基本 と 詳細 の2つのタブがあり、
- 基本 タブ:名前を入力する TextBox と Label
- 詳細 タブ:メモを入力する TextBox
を切り替えて使えます。タブをクリックするだけで画面が切り替わります。
ソリューションとプロジェクトを作る
Visual Studio で新しいプロジェクトを作ります。
- テンプレート: Windows Forms アプリ (.NET Framework)
- ソリューション名: TabSample
- プロジェクト名: TabControlDemo
作成すると Form1 が表示されます。
フォームに配置するコントロール
- TabControl をフォームに配置する
- TabControl を選択した状態で、プロパティの TabPages をクリック
- コレクションエディタで「追加」を2回押し、2つのタブを作る
- 1つ目のタブの Text を「基本」、2つ目のタブの Text を「詳細」に設定
各タブの中に、次のコントロールを配置します。
基本タブの中
| コントロール | 名前 |
|---|---|
| Label | nameLabel |
| TextBox | nameTextBox |
詳細タブの中
| コントロール | 名前 |
|---|---|
| Label | memoLabel |
| TextBox | memoTextBox |
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 は画面を整理するための基本コントロールです。





ディスカッション
コメント一覧
まだ、コメントがありません