C#を使ったタブの作成や追加、削除の方法について解説します

- システム
エンジニア - C#のタブ作成に興味があるのですが、実際の方法がよく分からなくて困っています。
- プロジェクト
マネージャー - なるほど。では実際のタブ作成から詳しくみていきましょう。
C#のタブについて
今回は、C#のタブについてご説明します。タブを使えばページを切り替えるようなことができます。
また、タブの作成・追加・削除・変更イベント・色変更などについてもご紹介します。C#のタブに興味のある方はぜひご覧ください。
タブの作成
C#でタブを作成するには、TabControlコントロールを使用します。
実際のソースコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
TabControl tabControl;
public Form1()
{
tabControl = new TabControl();
tabControl.Location = new Point(10, 10);
TabPage tabPage = new TabPage();
tabPage.Name = "tab1";
tabPage.Text = "tab1";
tabControl.TabPages.Add(tabPage);
tabPage = new TabPage();
tabPage.Name = "tab2";
tabPage.Text = "tab2";
tabControl.TabPages.Add(tabPage);
// 選択タブの設定
tabControl.SelectedIndex = 1;
this.Controls.Add(tabControl);
}
}
}
|
実行すると、タブの切り替えができることが分かります。
タブの追加
C#でタブを追加するには、TabControlにTabPageを追加します。
実際のソースコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
TabControl tabControl;
Button button1;
int tabCount;
public Form1()
{
tabControl = new TabControl();
tabControl.Location = new Point(10, 10);
TabPage tabPage = new TabPage();
tabPage.Name = "tab1";
tabPage.Text = "tab1";
tabControl.TabPages.Add(tabPage);
tabPage = new TabPage();
tabPage.Name = "tab2";
tabPage.Text = "tab2";
tabControl.TabPages.Add(tabPage);
button1 = new Button();
button1.Location = new Point(10, 150);
button1.Text = "Add";
this.Load += Form1_Load;
button1.Click += Button1_Click;
this.Controls.Add(tabControl);
this.Controls.Add(button1);
}
private void Form1_Load(object sender, EventArgs e)
{
tabCount = tabControl.TabCount;
}
private void Button1_Click(object sender, EventArgs e)
{
// タブの追加
tabCount++;
TabPage tabPage = new TabPage();
tabPage.Name = "tab" + tabCount.ToString();
tabPage.Text = "tab" + tabCount.ToString();
tabControl.TabPages.Add(tabPage);
tabControl.SelectedIndex = tabControl.TabCount - 1;
}
}
}
|
tabCountをインクリメントし、タブ名にしています。
Addボタンをクリックするとタブが追加され、追加されたタブが選択されることが分かります。
このように、C#でタブを追加するには、TabControlにTabPageを追加します。
タブの削除
C#でタブを削除するには、TabControlからTabPageを削除します。
実際のソースコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
TabControl tabControl;
Button button1, button2;
int tabCount;
public Form1()
{
tabControl = new TabControl();
tabControl.Location = new Point(10, 10);
TabPage tabPage = new TabPage();
tabPage.Name = "tab1";
tabPage.Text = "tab1";
tabControl.TabPages.Add(tabPage);
tabPage = new TabPage();
tabPage.Name = "tab2";
tabPage.Text = "tab2";
tabControl.TabPages.Add(tabPage);
button1 = new Button();
button1.Location = new Point(10, 150);
button1.Text = "Add";
button2 = new Button();
button2.Location = new Point(100, 150);
button2.Text = "Del";
this.Load += Form1_Load;
button1.Click += Button1_Click;
button2.Click += Button2_Click;
this.Controls.Add(tabControl);
this.Controls.Add(button1);
this.Controls.Add(button2);
}
private void Form1_Load(object sender, EventArgs e)
{
tabCount = tabControl.TabCount;
}
private void Button1_Click(object sender, EventArgs e)
{
tabCount++;
TabPage tabPage = new TabPage();
tabPage.Name = "tab" + tabCount.ToString();
tabPage.Text = "tab" + tabCount.ToString();
tabControl.TabPages.Add(tabPage);
tabControl.SelectedIndex = tabControl.TabCount - 1;
// タブがあればDelボタン有効
if (!button2.Enabled)
{
button2.Enabled = true;
}
}
private void Button2_Click(object sender, EventArgs e)
{
// 選択中タブの削除
tabControl.TabPages.Remove(tabControl.SelectedTab);
// タブがなければDelボタン無効
if (tabControl.TabCount == 0)
{
button2.Enabled = false;
tabCount = 0;
}
else
{
tabControl.SelectedIndex = tabControl.TabCount - 1;
}
}
}
}
|
Delボタンをクリックするとタブが削除されることが分かります。
このように、C#でタブを削除するには、TabControlからTabPageを削除します。
タブの変更イベント
C#でタブの変更を検知するには、イベントハンドラを利用します。
実際のソースコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
TabControl tabControl;
Button button1, button2;
int tabCount;
public Form1()
{
tabControl = new TabControl();
tabControl.Location = new Point(10, 10);
TabPage tabPage = new TabPage();
tabPage.Name = "tab1";
tabPage.Text = "tab1";
tabControl.TabPages.Add(tabPage);
tabPage = new TabPage();
tabPage.Name = "tab2";
tabPage.Text = "tab2";
tabControl.TabPages.Add(tabPage);
button1 = new Button();
button1.Location = new Point(10, 150);
button1.Text = "Add";
button2 = new Button();
button2.Location = new Point(100, 150);
button2.Text = "Del";
this.Load += Form1_Load;
button1.Click += Button1_Click;
button2.Click += Button2_Click;
// 選択イベント
tabControl.Selected += TabControl_Selected;
this.Controls.Add(tabControl);
this.Controls.Add(button1);
this.Controls.Add(button2);
}
private void Form1_Load(object sender, EventArgs e)
{
tabCount = tabControl.TabCount;
}
private void Button1_Click(object sender, EventArgs e)
{
tabCount++;
TabPage tabPage = new TabPage();
tabPage.Name = "tab" + tabCount.ToString();
tabPage.Text = "tab" + tabCount.ToString();
tabControl.TabPages.Add(tabPage);
tabControl.SelectedIndex = tabControl.TabCount - 1;
if (!button2.Enabled)
{
button2.Enabled = true;
}
}
private void Button2_Click(object sender, EventArgs e)
{
tabControl.TabPages.Remove(tabControl.SelectedTab);
if (tabControl.TabCount == 0)
{
button2.Enabled = false;
tabCount = 0;
}
else
{
tabControl.SelectedIndex = tabControl.TabCount - 1;
}
}
private void TabControl_Selected(object sender, TabControlEventArgs e)
{
// 選択されたタブ情報の出力
Console.WriteLine(tabControl.SelectedTab);
}
}
}
|
TabControlのSelectedで、タブ変更が検出され、コンソール出力されることが分かります。また、現在のタブが変更されると、「Deselecting」,「Deselected」,「Selecting」,「Selected」イベントが順番に発生ます。
このように、C#でタブの変更を検知するには、イベントハンドラを利用します。
タブの色変更
タブの色(文字色・背景色)を変更することもできます。
実際のソースコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
using System;
using System.Drawing;
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
TabControl tabControl;
Button button1, button2;
int tabCount;
public Form1()
{
tabControl = new TabControl();
tabControl.Location = new Point(10, 10);
TabPage tabPage = new TabPage();
tabPage.Name = "tab1";
tabPage.Text = "tab1";
tabControl.TabPages.Add(tabPage);
tabPage = new TabPage();
tabPage.Name = "tab2";
tabPage.Text = "tab2";
tabControl.TabPages.Add(tabPage);
button1 = new Button();
button1.Location = new Point(10, 150);
button1.Text = "Add";
button2 = new Button();
button2.Location = new Point(100, 150);
button2.Text = "Del";
this.Load += Form1_Load;
button1.Click += Button1_Click;
button2.Click += Button2_Click;
tabControl.Selected += TabControl_Selected;
tabControl.DrawItem += TabControl_DrawItem;
this.Controls.Add(tabControl);
this.Controls.Add(button1);
this.Controls.Add(button2);
}
private void Form1_Load(object sender, EventArgs e)
{
tabCount = tabControl.TabCount;
tabControl.DrawMode = TabDrawMode.OwnerDrawFixed;
}
private void Button1_Click(object sender, EventArgs e)
{
tabCount++;
TabPage tabPage = new TabPage();
tabPage.Name = "tab" + tabCount.ToString();
tabPage.Text = "tab" + tabCount.ToString();
tabControl.TabPages.Add(tabPage);
tabControl.SelectedIndex = tabControl.TabCount - 1;
if (!button2.Enabled)
{
button2.Enabled = true;
}
}
private void Button2_Click(object sender, EventArgs e)
{
tabControl.TabPages.Remove(tabControl.SelectedTab);
if (tabControl.TabCount == 0)
{
button2.Enabled = false;
tabCount = 0;
}
else
{
tabControl.SelectedIndex = tabControl.TabCount - 1;
}
}
private void TabControl_Selected(object sender, TabControlEventArgs e)
{
Console.WriteLine(tabControl.SelectedTab);
}
private void TabControl_DrawItem(object sender, DrawItemEventArgs e)
{
// 色ブラシ
SolidBrush backSolidBrush, foreSolidBrush;
// 選択中のタブ
if (tabControl.SelectedIndex == e.Index)
{
backSolidBrush = new SolidBrush(Color.LightBlue);
}
else
{
backSolidBrush = new SolidBrush(SystemColors.Control);
}
foreSolidBrush = new SolidBrush(Color.Black);
// 背景色の塗潰し
e.Graphics.FillRectangle(backSolidBrush, e.Bounds);
// 表示文字列の描画
StringFormat stringFormat = new StringFormat();
stringFormat.Alignment = StringAlignment.Center;
RectangleF rect = new RectangleF(e.Bounds.X, e.Bounds.Y + 6, e.Bounds.Width, e.Bounds.Height);
e.Graphics.DrawString(tabControl.TabPages[e.Index].Text, tabControl.Font, foreSolidBrush, rect, stringFormat);
}
}
}
|
TabControlのDrawItemイベントで、選択されたタブの色情報のみが変わるようにしています。このように、タブの色(文字色・背景色)を変更することもできます。
- システム
エンジニア - タブの色まで変更することができるんですね。とても興味がわきました。
- プロジェクト
マネージャー - まずは実践あるのみ。実際にコードを書いてより理解を深めてください。
C#でのタブの作成方法を知ろう
いかがでしたでしょうか。タブを使えばページを切り替えるようなことができます。C#でのタブの作成・追加・削除・変更イベント・色変更などについてご紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてみましょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


C#新着案件New Job
-
システム開発/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円東京都新宿区(新宿駅) -
システム開発/東京都新宿区/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円東京都新宿区(新宿駅) -
デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円神奈川県横浜市(桜木町駅) -
デバック、テスト項目の作成/神奈川県横浜市/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円神奈川県横浜市(桜木町駅) -
基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代前半の方活躍中/経験1年以上の方活躍中】/在宅勤務
月給29万~34万円東京都新宿区(西新宿駅) -
基幹システム開発導入/東京都新宿区/【WEB面談可/C#経験者/20代後半~40代の方活躍中/経験年数不問】/在宅勤務
月給41万~50万円東京都新宿区(西新宿駅)