Home

The Tab of a Tab Page

   

Introduction

Like any other visual window, the tab control uses such properties as the the Location (Right and Top values), the Size (Width and Height values), the tab stop (TabStop), the tab index (TabIndex), the cursor (Cursor), etc.

After adding the TabControl control to your form and after adding one or more tab pages, the property pages are created where the TabControl control is positioned and their dimensions are used by the tab control. This means that, if you want a different position, a smaller or larger property sheet, you must modify the dimensions of the TabControl control and not those of the tab pages, even though each tab page has a Location property and dimensions (the Size property).

To programmatically find out the location and size of a property sheet, the TabControl class is equipped with a property named DisplayRectangle that produces a Rectangle value. Here is an example of using it:

Private Sub Form1_Load(ByVal sender As System.Object, _
                           ByVal e As System.EventArgs) _
                           Handles MyBase.Load
        Dim rctLocationSize As Rectangle = TabControl1.DisplayRectangle

        TextBox1.Text = rctLocationSize.Left.ToString()
        TextBox2.Text = rctLocationSize.Top.ToString()
        TextBox3.Text = rctLocationSize.Width.ToString()
        TextBox4.Text = rctLocationSize.Height.ToString()
End Sub

The Caption of a Tab

Probably the first obvious characteristic of a tab page is the word or string that identifies it to the user. That is, the string that displays on the tab of a property page. This is known as its title or its caption. If you create your tab pages at design time, by default, the captions are set cumulatively as the pages are added. Usually you will not use these titles because they are meaningless.

To display a custom title for a property page, on the form, select the tab control:

  • Click the tab of the desired page. In the Properties window, change the value of the Text property
  • In the Properties window, click the ellipsis button of the TagePages field to open the TabPages Collection Editor. In the Members list, click the name of the tab page. In the right list, click Text and change the string

To programmatically change the title of a property page, assign a string to its Text property. Here is an example:

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class WinControls
        Inherits Form

        Private tclPropertySheet As TabControl
        Private pgeController As TabPage

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            Size = New Size(345, 228)
            StartPosition = FormStartPosition.CenterScreen

            tclPropertySheet = New TabControl()
            tclPropertySheet.Location = New Point(14, 16)
            tclPropertySheet.Size = New Size(310, 170)

            pgeController = New TabPage()
            pgeController.Text = "Controller"
            tclPropertySheet.Controls.Add(pgeController)


            Controls.Add(tclPropertySheet)
        End Sub

        Public Shared Function Main() As Integer

            Application.Run(New WinControls())
            Return 0

        End Function

    End Class

End Module

This would produce:

Tab Control

Practical LearningPractical Learning: Access a Tab Page

 
  1. In the combo box on top of the Properties window, select tabCombination
  2. Click Text and type Combination
  3. In the combo box on top of the Properties window, select tabPermutation
  4. Click Text and type Permutation and press Enter
  5. In the combo box on top of the Properties window, select tabFactorial
  6. Click Text and type Factorial
     
    Algebra
  7. Save the form

Hot Tracking the Caption of a Tab Page

When the user positions the mouse on a tab, you can (slightly) change the color of the caption to blue. To support this, the TabControl class is equipped with the HotTrack Boolean property. Its default value is False. At design time, to specify this value, select the control and, in the Properties window, select the desired option of the HotTrack field. To programmatically set this property, assign the true or false value to the property. Here is an example:

Public Sub InitializeComponent()
            Size = New Size(345, 228)
            StartPosition = FormStartPosition.CenterScreen

            tclPropertySheet = New TabControl()
            tclPropertySheet.Location = New Point(14, 16)
            tclPropertySheet.Size = New Size(310, 170)
            tclPropertySheet.HotTrack = True

            pgeController = New TabPage()
            pgeController.Text = "Controller"
            tclPropertySheet.Controls.Add(pgeController)


            Controls.Add(tclPropertySheet)
End Sub

Practical LearningPractical Learning: Hot Tracking the Caption of a Tab Page

 
  1. In the combo box on top of the Properties window, select tclAlgebra
  2. Double-click HotTrack to set its value to True

Padding the Caption of a Tab Page

When you specify the caption of a tab page, the string displays from the left to the right side of the tab area. If you want, you can specify how much space should be left empty on the left side of the caption. This space is referred to as padding. To support this, the TabControl class is equipped with a property named Padding. The Padding property is of type Point.

During design, to specify the amount of padding, select the tab control on the form. In the Properties window, click the + button of the Padding field, type the desired amounts of the X and the Y values. To programmatically specify the padding amount, assign a Point value to the Padding property of your TabControl object.

The Tool Tip of a Tab Page

A tab is meant to show a relatively short caption that indicates to the user what the tab page contains. If you want to provide more information, you can display a more explicit tool tip that would display when the user positions the mouse on the tab.

To support the tooltips on tabs, the TabControl class is equipped with a Boolean property named ShowToolTips. Therefore, if you want the tabs to displays the tool tips, first set this property to True. To show a tool tip on a tab, select it on the tab control and, in the Properties window, enter a string in the ToolTipText field.

A Picture on a Tab

Besides, or instead of, the caption, you can display an icon on the tab of one or more or some selected tabs of your control. To start, you should create an image list and add some images or icons to it. After creating the image list, to associate it with the tab control, on the form, select the control. In the Properties window, click the arrow of the ImageList field and select the image list.

To specify the image list with code, first create the image list, visually or programmatically. To associate the image list with the tab control, assign the name of the image list to the ImageList property of the tab control. Here is an example:

To visually specify the image to display on a tab:

  • On the form, select the desired tab page. In the Properties window, click ImageIndex and click the arrow of its combo box to select the index of the picture from the image list
  • On the forms, select the tab control. In the Properties window, click the ellipsis button of the TagePages field to open the TabPages Collection Editor. In the Members list, click the name of the tab page. In the right list, click ImageIndex and click the arrow of its combo box to select the index of the picture

Before programmatically using the images on a tab control, you must first create an ImageList object and then assign it to the tab control. Here is an example:

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class WinControls
        Inherits Form

        Private tclPropertySheet As TabControl
        Private lstImages As ImageList

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            Size = New Size(345, 228)
            StartPosition = FormStartPosition.CenterScreen

            tclPropertySheet = New TabControl()
            tclPropertySheet.Location = New Point(14, 16)
            tclPropertySheet.Size = New Size(310, 170)
            tclPropertySheet.HotTrack = True

            lstImages = New ImageList()
            lstImages.Images.Add(Image.FromFile("E:\Programs\image1.jpg"))
            lstImages.Images.Add(Image.FromFile("E:\Programs\Image2.jpg"))
            lstImages.Images.Add(Image.FromFile("E:\Programs\Image3.jpg"))
            tclPropertySheet.ImageList = lstImages


            Controls.Add(tclPropertySheet)
        End Sub

        Public Shared Function Main() As Integer

            Application.Run(New WinControls())
            Return 0

        End Function

    End Class

End Module

After assigning an image list to the tab control, to programmatically specify the image to display on a tab, assign an index from an ImageList object to the tab page. To support this, the TabPage class is equipped with a property named ImageIndex that is of type int. Here is an example:

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class WinControls
        Inherits Form

        Private lstImages As ImageList
        Private pgeController As TabPage
        Private pgeAccount As TabPage
        Private pgeSummary As TabPage
        Private tclPropertySheet As TabControl

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()
            Size = New Size(345, 228)
            StartPosition = FormStartPosition.CenterScreen

            tclPropertySheet = New TabControl()
            tclPropertySheet.Location = New Point(14, 16)
            tclPropertySheet.Size = New Size(310, 170)
            tclPropertySheet.HotTrack = True

            lstImages = New ImageList()
            lstImages.Images.Add(Image.FromFile("E:\Programs\image1.jpg"))
            lstImages.Images.Add(Image.FromFile("E:\Programs\Image2.jpg"))
            lstImages.Images.Add(Image.FromFile("E:\Programs\Image3.jpg"))
            tclPropertySheet.ImageList = lstImages

            pgeController = New TabPage()
            pgeController.Text = "Controller"
            pgeController.ImageIndex = 1
            tclPropertySheet.Controls.Add(pgeController)

            pgeAccount = New TabPage()
            pgeAccount.Text = "Account"
            pgeAccount.ImageIndex = 2
            tclPropertySheet.TabPages.Add(pgeAccount)

            pgeSummary = New TabPage()
            pgeSummary.Text = "Summary"
            pgeSummary.ImageIndex = 0
            tclPropertySheet.TabPages.Add(pgeSummary)

            Controls.Add(tclPropertySheet)
        End Sub

        Public Shared Function Main() As Integer

            Application.Run(New WinControls())
            Return 0

        End Function

    End Class

End Module

Here is an example of what this would produce:

Tab Control

 

 

Previous Copyright © 2008-2012 FunctionX Next