Using a PageControl (to display tabbed pages)

The fine LazPlanet guidance helped us to prepare our own little demonstration of how you could develop an information/tutorial booklet using a TPageControl in Lazarus.

These bullet points might save you some time when getting started with PageControls.
  • This demo shows that (unlike with a TabControl) the components on each page need not be the same.
  • The page control does not appear with tabs until you add pages to it. Right click in the design view of the control and Add Page is the first item in the pop-up menu.
  • It can be easier to select a component by clicking on its name in the Object Inspector than by clicking on its representation in the design view of the form.
  • Add components to each page as if it were a form.
  • In order to drag the PageControl, position the mouse pointer to the right of the tabs.
  • Adjust the size of the page control and not the size of pages that you have added to it.

The Pascal and source code of the form follow the screenshots. Note that we made all property changes using the Object Inspector and did not write any Pascal code! See the Create_new_tab procedure in the Novel unit of Jerzy Griffith's (Delphi XE4) word processor for creating a new tab in code. Jerzy gives a useful reference

First Tab

First Tab

Second Tab

Second Tab

Pascal Code of Form

unit uPageControl;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ComCtrls,
  StdCtrls, ExtCtrls;

type
  TForm1 = class(TForm)
    Image1: TImage;
    memImage, memShapes : TMemo;
    PageControl1: TPageControl;
    Shape1, Shape2, Shape3, Shape4: TShape;
    tsImage, tsShape: TTabSheet;
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

end.             

Source Code of Form

We replaced our displayed image with a small place-holder image so that in the source of the form it saves you some scrolling when inspecting the values of the other properties.

object Form1: TForm1
  Left = 239
  Height = 369
  Top = 117
  Width = 414
  Caption = 'PageControl Demo'
  ClientHeight = 369
  ClientWidth = 414
  LCLVersion = '1.2.4.0'
  object PageControl1: TPageControl
    Left = 8
    Height = 360
    Top = 6
    Width = 395
    ActivePage = tsImage
    TabIndex = 0
    TabOrder = 0
    object tsImage: TTabSheet
      Caption = 'Image'
      ClientHeight = 332
      ClientWidth = 387
      object Image1: TImage
        Left = 16
        Height = 256
        Top = 80
        Width = 354
        Picture.Data = {
          0A544A706567496D61676582030000FFD8FFE000104A46494600010101004800
          480000FFDB0043000503040404030504040405050506070C08070707070F0B0B
          090C110F1212110F111113161C1713141A1511111821181A1D1D1F1F1F131722
          24221E241C1E1F1EFFDB0043010505050706070E08080E1E1411141E1E1E1E1E
          1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E1E
          1E1E1E1E1E1E1E1E1E1E1E1E1EFFC00011080015001503012200021101031101
          FFC4001F0000010501010101010100000000000000000102030405060708090A
          0BFFC400B5100002010303020403050504040000017D01020300041105122131
          410613516107227114328191A1082342B1C11552D1F02433627282090A161718
          191A25262728292A3435363738393A434445464748494A535455565758595A63
          6465666768696A737475767778797A838485868788898A92939495969798999A
          A2A3A4A5A6A7A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6
          D7D8D9DAE1E2E3E4E5E6E7E8E9EAF1F2F3F4F5F6F7F8F9FAFFC4001F01000301
          01010101010101010000000000000102030405060708090A0BFFC400B5110002
          0102040403040705040400010277000102031104052131061241510761711322
          328108144291A1B1C109233352F0156272D10A162434E125F11718191A262728
          292A35363738393A434445464748494A535455565758595A636465666768696A
          737475767778797A82838485868788898A92939495969798999AA2A3A4A5A6A7
          A8A9AAB2B3B4B5B6B7B8B9BAC2C3C4C5C6C7C8C9CAD2D3D4D5D6D7D8D9DAE2E3
          E4E5E6E7E8E9EAF2F3F4F5F6F7F8F9FAFFDA000C03010002110311003F00F75F
          06699E1DFF00845B4D96E741D32EAE27B68E69A6B9B6495DDD94124B3027A9E9
          D056BFF66F85BFE857D07FF05F17FF00135C1BF8993C3BE01D335296CEEEF234
          8ED6D8C76DB3786685981F9D9463119EF9E471D709E11F88165E24B8BCB786C3
          50B292D123775BA11FCC242E011B1DBFE79B6738ED5DAE0DB215AC67FC688ECF
          49BAD367D0ED61D34DCAC8265B6511A3EDDBB4ED1C03F31E475FC28AA3F18EE8
          5CA69241CED337FED3A2BA29AF755CC66F52A5F789758F0A6AB75A2D8DECC12D
          5843E647218CBAAF0B90A7B0AA979E3CD6AF36FDB2696E76676F9B333EDCF5C6
          7A7414514E3AA4C1C99B5E13D04F8FEDA69EF6F5ED16CDC2224681B25864924F
          D0514515C75AB4E33693358C535767FFD9
        }
        Proportional = True
      end
      object memImage: TMemo
        Left = 18
        Height = 64
        Top = 8
        Width = 352
        Lines.Strings = (
          'Memo for the Image tabsheet'
          'Load the image by clicking (1) the ellipsis of the Picture '
          'property in the Object Inspector then (2) the Load button. '
        )
        TabOrder = 0
      end
    end
    object tsShapes: TTabSheet
      Caption = 'Shapes'
      ClientHeight = 332
      ClientWidth = 387
      object memShapes: TMemo
        Left = 8
        Height = 96
        Top = 8
        Width = 368
        Lines.Strings = (
          'Memo for Shapes tabsheet'
          ''
          'See the shapes underneath with shape types stSquaredDiamond, '
          'stRoundSquare, stCircle and stTriangle.'
          ''
          'Find the TShape component under the Additional tab.  '
        )
        TabOrder = 0
      end
      object Shape1: TShape
        Left = 32
        Height = 65
        Top = 184
        Width = 65
        Brush.Color = 8454016
        Shape = stSquaredDiamond
      end
      object Shape2: TShape
        Left = 120
        Height = 65
        Top = 184
        Width = 65
        Brush.Color = 16744448
        Shape = stRoundSquare
      end
      object Shape3: TShape
        Left = 296
        Height = 65
        Top = 184
        Width = 56
        Brush.Color = 8454143
        Shape = stTriangle
      end
      object Shape4: TShape
        Left = 208
        Height = 65
        Top = 184
        Width = 65
        Brush.Color = 33023
        Shape = stCircle
      end
    end
  end
end
Programming - a skill for life!

Using widgets (such as list boxes, combo boxes, string grids, DBgrids, charts and maps) and drawing on the canvas