VB.NET: Display Multiple Forms in Tabs

Hi guys, this time I'm gonna show you how to display form as tabs just like on chrome or firefox.

A sample below, I have a project named TabUIFormat. Form1 is automatically generated.


We'll add an MDI Parent form named frmMain. Click on the project node in Solution Explorer then choose Add -> Windows Form...


A dialog window will be displayed, choose Windows form on the left panel then find MDI Parent Form template. Name it frmMain then click Add button. 


An MDI Form will be added as below image. This template is too complex for my sample so I'll remove the unnecessary menu and add my own menu. I'll also remove the toolbar since we won't use it for now.


So here is the menus I need to call Form 1, Form 2, and Form 3. 


Because we generated the MDI Parent from template so the code behind is also automatically generated.


Let's remove all because we don't need it. The result is as below. 


We've already have frmMain and Form1, add 2 more forms, Form2 and Form3 using similar way to add the MDI Parent but this time we choose Windows Form


So now we have an MDI Parent form and 3 regular forms:


Set its project property from Project menu -> [Project Name] Properties ....


We'll make frmMain as the initial Form by choosing Application (on the left panel), set Startup Form into frmMain. And Shutdown mode into "When last form closes" so the application will be terminated hen the last form is closed.


Add a TabControl on frmMain and set its position under the menu. 


Set TabPages property and remove all existing TabPages.


The result is as below image, fit the width with the MDI form width also set anchor  property into Top, Left, Right, so the posision will keep on the top and the width is always fit the MDI form while it's resizing.


Set display UI for Form1, Form2, and Form3 so it's easier for use to see the differences.


And this is code that we have to write on:

Code frmMain.vb

Public Class frmMain

    'to hide/show tab
    Sub SetTabDisplay()
        If Me.ActiveMdiChild Is Nothing Then
            TabControl1.Visible = False
        Else
            TabControl1.Visible = True
        End If
    End Sub

    Private Sub frmMain_Activated(sender As Object, e As EventArgs) _ 
            Handles Me.Activated
        SetTabDisplay()
    End Sub

    Private Sub frmMain_MdiChildActivate(sender As Object, e As EventArgs) _
            Handles Me.MdiChildActivate
        SetTabDisplay()
    End Sub

    Private Sub TabControl1_SelectedIndexChanged(sender As Object_
            e As EventArgsHandles TabControl1.SelectedIndexChanged
        If TabControl1.TabPages.Count > 0 Then
            TabControl1.Visible = True
        Else
            TabControl1.Visible = False
        End If
        If TabControl1.SelectedTab IsNot Nothing Then
            For Each frm As Form In Me.MdiChildren
                If frm.Name = TabControl1.SelectedTab.Name Then
                    frm.Show()
                    frm.Select()
                End If
            Next
        End If
        If TabControl1.SelectedTab IsNot Nothing Then
            If TabControl1.SelectedTab.Controls.Count > 0 Then
                TabControl1.Dock = DockStyle.Fill
            Else
                TabControl1.Dock = DockStyle.None
            End If
        End If
    End Sub

    Public Function isTabExist(ByVal TabCaption As String) As Boolean
        Dim bln As Boolean = False
        For Each itemTab As TabPage In TabControl1.TabPages
            If itemTab.Text = TabCaption Then
                bln = True
            End If
        Next
        Return bln
    End Function

    Function isFormExist(ByVal Caption As StringAs Boolean
        Dim bln As Boolean = False
        For Each frm As Form In Me.MdiChildren
            If frm.Text = Caption Then
                bln = True
            End If
        Next
        Return bln
    End Function

    Sub LoadForm(ByVal frm As FormOptional state As FormWindowState = _
                 FormWindowState.Maximized)
        Try

            If isTabExist(frm.Text) = False Then
                Dim childTab As TabPage New TabPage()
                childTab.Name = frm.Name
                childTab.Text = frm.Text

                TabControl1.Dock = DockStyle.None
                TabControl1.Height = 25
                TabControl1.TabPages.Add(childTab)
                TabControl1.SelectTab(childTab)
                frm.WindowState = state
                frm.MdiParent = Me
                frm.Show()
            Else
                TabControl1_SelectedIndexChanged(NothingNothing)
            End If

        Catch ex As Exception
            MsgBox("LoadForm: " & vbCrLf & ex.Message)
        End Try
    End Sub

    Private Sub Form1ToolStripMenuItem_Click(sender As Object, _
            e As EventArgs) Handles Form1ToolStripMenuItem.Click
        LoadForm(Form1)
    End Sub

    Private Sub Form2ToolStripMenuItem_Click(sender As Object, _
                e As EventArgs) Handles Form2ToolStripMenuItem.Click
        LoadForm(Form2)
    End Sub

    Private Sub Form3ToolStripMenuItem_Click(sender As Object, _
            e As EventArgsHandles Form3ToolStripMenuItem.Click
        LoadForm(Form3)
    End Sub

End Class

What needs to be considered in Form1, Form2, and Form3 or other child forms are the form activated event to select the selected tab and the dispose event to delete the tab page if the form is closed.

Code Form1.vb :
Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) _
                Handles Button1.Click
        Me.Close()
    End Sub

    Private Sub Form1_Activated(sender As Object, e As EventArgs) _
                Handles Me.Activated
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.SelectTab( _                  
                    frmMain.TabControl1.TabPages.IndexOfKey(Me.Name) _
                    )
        End If
    End Sub

    Private Sub Form1_Disposed(sender As Object, e As EventArgs) _
                Handles Me.Disposed
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.TabPages.RemoveByKey(Me.Name)
        End If
    End Sub
End Class

Code Form2.vb :
Public Class Form2
    Private Sub Button1_Click(sender As Object, e As EventArgs) _
                Handles Button1.Click
        Me.Close()
    End Sub

    Private Sub Form2_Activated(sender As Object, e As EventArgs) _
                Handles Me.Activated
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.SelectTab( _                  
                    frmMain.TabControl1.TabPages.IndexOfKey(Me.Name) _
                    )
        End If
    End Sub

    Private Sub Form2_Disposed(sender As Object, e As EventArgs) _
                Handles Me.Disposed
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.TabPages.RemoveByKey(Me.Name)
        End If
    End Sub
End Class

Code Form3.vb :
Public Class Form3
    Private Sub Button1_Click(sender As Object, e As EventArgs) _
                Handles Button1.Click
        Me.Close()
    End Sub

    Private Sub Form3_Activated(sender As Object, e As EventArgs) _
                Handles Me.Activated
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.SelectTab( _                  
                    frmMain.TabControl1.TabPages.IndexOfKey(Me.Name) _
                    )
        End If
    End Sub

    Private Sub Form3_Disposed(sender As Object, e As EventArgs) _
                Handles Me.Disposed
        If frmMain.TabControl1.TabPages.ContainsKey(Me.Name) Then
            frmMain.TabControl1.TabPages.RemoveByKey(Me.Name)
        End If
    End Sub
End Class

Let's try to debug. When some forms are called it will display as a tab page. 







Post a Comment

0 Comments