Delphi Programming for Beginners - Lesson 4

Basic Components Part Two

Last time we went through the very basic components and today we will finish what we started. So far, all components have been put directly on the form, but sometimes it’s suitable to divide the components from each other or it’s necessary to put on the form more components than it’s its capacity.

Delphi Course

TPanel and TGroupBox

The first problem is solved by components TPanel and TGroupBox. Both work as a container for other components (including other TPanels). The important thing is if you put a component on a panel, coordinates of that component are related to the position of this panel and so if you change the position of this panel, all components are moved automatically.

TPanel and TGroupBox differ in an appearance where TPanel is often used as an invisible container (it sets a property Bevel* to value bvNone and Caption to empty text) whereas TGroupBox is used for visual highlighting for groups of components.

WARNING: In case you set Visible:=False, all components in a panel or groupbox become invisible. And the same applies for Enabled.

Compared to these 2 components, TRadioGroup is a special component. Simply said, it’s a panel with a group of TRadioButtons which are defined via a property Items and a chosen item is available via ItemIndex. It’s possible to do the same with a combination of TGroupBox and a group of TRadioButtons, but that’s more laborious.


This component is often a part of other components – as a simple scroll bar. But once in a while you have to let user to move with something. That’s when you use this component.

Important properties and events:

  • Min and Max – a range
  • Position – a current position
  • SmallChange – a change made by pressing arrow keys
  • LargeChange – a change made by pressing in the empty spaces in a scroll bar
  • OnChange – an event called when a change is made by a user


On the other hand, when we want to show user a status of an operation, we use this component. In the picture it’s the green one.

Important properties:

  • Min, Max and Position
  • Step – step while StepIt method calling, advantageous such as in cycle after one pass
  • Orientation – horizontally or vertically


This component allows us to put more components on the form via markers. It doesn’t just look cool, it’s very effective as well, as in each marker we can put only related components. Every marker (component TTabSheet – a new one is added from a context menu by choosing New Page) has Caption, PageIndex (the order of this marker among all markers), Image Index(icon index in ImageList) and TabVisible, which shows and hides a marker (it’s not the same as Visible).

Important thing is that every marker acts like a container for components (like a panel), that means if a user chooses a different marker, components from this marker will be shown.

Other properties and events:

  • Images – adds TImageList, for the top of pages
  • ActivePage – current marker
  • Multiline – if there’s too many markers, they will be divided into more lines, otherwise there will be arrows on the sides
  • TabPosition – position of markers, practically only tpTop is usable
  • TabWidth – the width of a marker, 0 is set automatically
  • TabIndex – equivalent of ActivePage, but this time the number of page is tracked, the first one has number 0
  • OnChange – an event when a marker is changed

This component is used very often in many tapes of apps.


In the picture you may see this component at the very bottom. It is used for a status indication, a cursor position etc. It can work in 2 modes:

  • SimplePanel – over the whole width of a component there’s just one text which is set via SimpleText
  • A sector mode (as shown in the picture) where individual sections are defined via Panels. In IDE a panels‘ editor is called up, individual texts are set status.Panels[0].Text:='text';

Delphi Course


This component is used for a simple icons‘ management which can be used in various components. It’s a non-visual component (it can’t be seen while the program is running).

The editor is launched by the right mouse button above a component and choosing the editor, otherwise a double click on a component works as well.

Delphi Course

In the picture you can see an editor for TImageList with 4 icons.

If we go back to TPageControl component, we can assign TImageList to a property Images. Delphi automatically assigns appropriate icon to every marker, but this can be changed manually via choosing a marker and by changing ImageIndex. By assigning -1, an icon will not be shown.

It works similarly with other components.

Delphi Course


Today it will be rather mini tasks for practicing individual components:

  • Connect TProgressBar, TScrollBar and TStatusBar so that while moving with ScrollBar, the progress will be updating and in StatusBar in a SimplePanel mode the % will be shown based on scrollbar (that means if 100 is maximum and position is 45, 45% will be shown). After the start of the application everything will be on 0 and 0% will be shown (text 0% isn’t set from IDE, but is being updated in Form.Create by calling an appropriate method).
  • Connect TRadioGroup with 4 items with TPageControl so that by choosing a different item, appropriate marker will be chosen.
  • Change the previous task so that PageControl has hidden markers and switching is thus possible only via TRadioGroup.
  • Let’s have ImageList with 4 icons, TRadioGroup with 4 items and TPageControl with one marker. By choosing options in TRadioGroup set an icon for the marker.

About the Author

Ing. Radek Červinka
Embarcadero MVP