タブコントロールを使ってみよう!VB.NETでのタブの作成方法をご解説

- システム
エンジニア - ページの切り替え方法について教えてください。
- プロジェクト
マネージャー - タブコントロールという方法があります。詳しくみていきましょう。
VB.NETのタブコントロールについて
今回は、VB.NETのタブコントロールについて説明します。タブコントロールを使えばページを切り替えるようなことができます。タブの作成・追加・削除・変更イベント・色変更などについて紹介します。
VB.NETのタブコントロールに興味のある方はぜひご覧ください。
タブの作成
VB.NETでタブを作成するには、タブコントロールを使用します。
実際のソースコードを見てみましょう。
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 |
Public Class Form1 Dim tabControl As TabControl Sub New() tabControl = New TabControl() tabControl.Location = New Point(10, 10) Dim tabPage As 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 Me.Controls.Add(tabControl) End Sub End Class |
実行すると、タブの切り替えができることが分かります。
タブの追加
VB.NETでタブを追加するには、タブコントロールに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 |
Public Class Form1 Dim tabControl As TabControl Dim button1 As Button Dim tabCount As Integer Sub New() tabControl = New TabControl() tabControl.Location = New Point(10, 10) Dim tabPage As 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" AddHandler Me.Load, AddressOf Form1_Load AddHandler Me.button1.Click, AddressOf Button1_Click Me.Controls.Add(button1) Me.Controls.Add(tabControl) End Sub Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) tabCount = tabControl.TabCount End Sub Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) ' タブの追加 tabCount = tabCount + 1 Dim tabPage As TabPage = New TabPage() tabPage.Name = "tab" + tabCount.ToString() TabPage.Text = "tab" + tabCount.ToString() tabControl.TabPages.Add(TabPage) tabControl.SelectedIndex = tabControl.TabCount - 1 End Sub End Class |
tabCountをインクリメントし、タブ名にしています。Addボタンをクリックするとタブが追加され、追加されたタブが選択されることが分かります。
このように、VB.NETでタブを追加するには、タブコントロールにTabPageを追加します。
タブの削除
VB.NETでタブを削除するには、タブコントロールから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 |
Public Class Form1 Dim tabControl As TabControl Dim button1, button2 As Button Dim tabCount As Integer Sub New() tabControl = New TabControl() tabControl.Location = New Point(10, 10) Dim tabPage As 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" AddHandler Me.Load, AddressOf Form1_Load AddHandler Me.button1.Click, AddressOf Button1_Click AddHandler Me.button2.Click, AddressOf Button2_Click Me.Controls.Add(button1) Me.Controls.Add(button2) Me.Controls.Add(tabControl) End Sub Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) tabCount = tabControl.TabCount End Sub Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) ' タブの追加 tabCount = tabCount + 1 Dim tabPage As TabPage = New TabPage() tabPage.Name = "tab" + tabCount.ToString() TabPage.Text = "tab" + tabCount.ToString() tabControl.TabPages.Add(TabPage) tabControl.SelectedIndex = tabControl.TabCount - 1 ' タブがあればDelボタン有効 If Not button2.Enabled Then button2.Enabled = True End If End Sub Private Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) ' 選択中タブの削除 tabControl.TabPages.Remove(tabControl.SelectedTab) ' タブがなければDelボタン無効 If tabControl.TabCount = 0 Then button2.Enabled = False tabCount = 0 Else tabControl.SelectedIndex = tabControl.TabCount - 1 End If End Sub End Class |
Delボタンをクリックするとタブが削除されることが分かります。
このように、VB.NETでタブを削除するには、タブコントロールからTabPageを削除します。
タブの変更イベント
VB.NETでタブの変更を検知するには、タブコントロールのイベントハンドラを利用します。
実際のソースコードを見てみましょう。
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 |
Public Class Form1 Dim tabControl As TabControl Dim button1, button2 As Button Dim tabCount As Integer Sub New() tabControl = New TabControl() tabControl.Location = New Point(10, 10) Dim tabPage As 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" AddHandler Me.Load, AddressOf Form1_Load AddHandler Me.button1.Click, AddressOf Button1_Click AddHandler Me.button2.Click, AddressOf Button2_Click ' 選択イベント AddHandler Me.tabControl.Selected, AddressOf TabControl_Selected Me.Controls.Add(button1) Me.Controls.Add(button2) Me.Controls.Add(tabControl) End Sub Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) tabCount = tabControl.TabCount End Sub Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) ' タブの追加 tabCount = tabCount + 1 Dim tabPage As TabPage = New TabPage() tabPage.Name = "tab" + tabCount.ToString() TabPage.Text = "tab" + tabCount.ToString() tabControl.TabPages.Add(TabPage) tabControl.SelectedIndex = tabControl.TabCount - 1 ' タブがあればDelボタン有効 If Not button2.Enabled Then button2.Enabled = True End If End Sub Private Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) ' 選択中タブの削除 tabControl.TabPages.Remove(tabControl.SelectedTab) ' タブがなければDelボタン無効 If tabControl.TabCount = 0 Then button2.Enabled = False tabCount = 0 End If End Sub Private Sub TabControl_Selected(ByVal sender As Object, ByVal e As TabControlEventArgs) ' 選択されたタブ情報の出力 Console.WriteLine(tabControl.SelectedTab) End Sub End Class |
TabControlのSelectedで、タブ変更が検出され、コンソール出力されることが分かります。また、現在のタブが変更されると、「Deselecting」、「Deselected」、「Selecting」、「Selected」イベントが順番に発生します。
このように、VB.NETでタブの変更を検知するには、タブコントロールのイベントハンドラを利用します。
タブの色変更
タブの色(文字色・背景色)を変更することもできます。
実際のソースコードを見てみましょう。
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 |
Public Class Form1 Dim tabControl As TabControl Dim button1, button2 As Button Dim tabCount As Integer Sub New() tabControl = New TabControl() tabControl.Location = New Point(10, 10) Dim tabPage As 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" AddHandler Me.Load, AddressOf Form1_Load AddHandler Me.button1.Click, AddressOf Button1_Click AddHandler Me.button2.Click, AddressOf Button2_Click AddHandler Me.tabControl.Selected, AddressOf TabControl_Selected AddHandler Me.tabControl.DrawItem, AddressOf TabControl_DrawItem Me.Controls.Add(button1) Me.Controls.Add(button2) Me.Controls.Add(tabControl) End Sub Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) tabCount = tabControl.TabCount tabControl.DrawMode = TabDrawMode.OwnerDrawFixed End Sub Private Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) ' タブの追加 tabCount = tabCount + 1 Dim tabPage As TabPage = New TabPage() tabPage.Name = "tab" + tabCount.ToString() TabPage.Text = "tab" + tabCount.ToString() tabControl.TabPages.Add(TabPage) tabControl.SelectedIndex = tabControl.TabCount - 1 ' タブがあればDelボタン有効 If Not button2.Enabled Then button2.Enabled = True End If End Sub Private Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) ' 選択中タブの削除 tabControl.TabPages.Remove(tabControl.SelectedTab) ' タブがなければDelボタン無効 If tabControl.TabCount = 0 Then button2.Enabled = False tabCount = 0 End If End Sub Private Sub TabControl_Selected(ByVal sender As Object, ByVal e As TabControlEventArgs) ' 選択されたタブ情報の出力 Console.WriteLine(tabControl.SelectedTab) End Sub Private Sub TabControl_DrawItem(ByVal sender As Object, ByVal e As DrawItemEventArgs) ' 色ブラシ Dim backSolidBrush, foreSolidBrush As SolidBrush ' 選択中のタブ If tabControl.SelectedIndex = e.Index Then backSolidBrush = New SolidBrush(Color.LightBlue) Else backSolidBrush = New SolidBrush(SystemColors.Control) End If foreSolidBrush = New SolidBrush(Color.Black) ' 背景色の塗潰し e.Graphics.FillRectangle(backSolidBrush, e.Bounds) ' 表示文字列の描画 Dim stringFormat As StringFormat = New StringFormat() stringFormat.Alignment = StringAlignment.Center Dim rect As RectangleF = 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) End Sub End Class |
タブコントロールのDrawItemイベントで、選択されたタブの色情報のみが変わるようにしています。このように、タブの色(文字色・背景色)を変更することもできます。
- システム
エンジニア - ページを切り替えたり色変更や追加・削除もできるのですね。
- プロジェクト
マネージャー - 大変便利な機能です。是非ご自身で書いてマスターしてみてください。
VB.NETでのタブの作成方法を知ろう
いかがでしたでしょうか。タブコントロールを使えばページを切り替えるようなことができます。VB.NETでのタブの作成・追加・削除・変更イベント・色変更などについて紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

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


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)