TabControl

TabControl

A TabControl is an advanced container component that lets you organize screen content into multiple pages. Each TabPage holds its own group of controls (buttons, labels, grids, etc.), and the operator sees only the content of the currently selected tab.
This structure is ideal for machines or processes where multiple groups of information need to be presented in an organized way within a single area.

Basic Configuration and Workflow

  • Adding the TabControl

Drag a TabControl component onto the screen.
By default, it usually comes with two empty tabs (TabPage 0 and TabPage 1).

  • Managing Pages

Open the component’s Advanced panel.
Find the TabPages (Collection) property and click the … button.
This collection editor allows you to add, remove, rename, or reorder TabPages.
Each TabPage has sub-properties such as Text (the visible tab caption, e.g. “Alarms”) and Name (its code name).

  • Adding Content

In the design view, click the tab whose content you want to edit (e.g. the “Alarms” tab).
Once that tab becomes active, drag all desired controls (DataGridView, Button, Label, etc.) directly onto that TabPage.
These controls now belong to that specific tab.

Properties Panel – Key Properties

Value

  • Index

Function: A two-way binding that represents the index of the currently selected tab (0 for the first tab, 1 for the second, 2 for the third, etc.).

  • Read (Tag → Object):
    If a linked tag (e.g. PLC_ActiveTab) is set to 2 via script or PLC, the TabControl automatically switches to the third tab (index 2).
  • Write (Object → Tag):
    If the operator clicks the “Alarms” tab (index 1), the value 1 is written into the PLC_ActiveTab tag.

Events
Index Changed
Function: Triggered when the operator switches to a different tab.
Use Case: Most commonly used event. For example, when the “Alarms” tab is selected, a script attached to this event can refresh a DataGridView (e.g. by calling an RefreshAlarmList() script).

Advanced Panel – Key Properties
TabPages (Collection)
The main area where tabs are created, removed, renamed, and reordered.
Alignment
Determines where the tab headers appear on the control:

  • Top (Default)
  • Bottom
  • Left (for a vertical tab layout)
  • Right (for a vertical tab layout)

SizeMode
Determines how tab headers are sized:

  • Normal (Default): Each tab is sized according to its text and icon.
  • FillToRight: Tab headers expand to fill the entire width of the TabControl.

ImageList

Allows assigning icons to tab headers (e.g. a bell icon for an “Alarms” tab) by linking an ImageList component.

Common Usage Examples

Example: Creating a Machine Detail Panel (Basic Usage)
  1. Add a TabControl to the screen.
  2. Go to Advanced -> TabPages.
  3. Add three TabPages and set their Text properties to:
    • “Overview”
    • “Parameters”
    • “Alarms”
  4. In the design area:
    • Click the “Overview” tab and place the machine’s PictureBox and Labels.
    • Click the “Parameters” tab and place NumericUpDown or TextBox controls.
    • Click the “Alarms” tab and place a DataGridView.

Result:
A single TabControl provides the functionality of three different screens within one compact area.
The operator switches between relevant control groups simply by clicking tabs.

Leave a Reply