Romans
Romans

Reputation: 485

Resizing panels components proportionally in Delphi

So I am using Delphi Rad Studio version 10.3.

I have to create a stats form for a PAT at school(Grade 11).

I am trying to create a form with 2 panels. One for the buttons to display the statistics and interact with, and the other for the actual statistic.

Here is the problem: I want to be able to resize the form, and the 2 panels should resize themselves proportionally. The bug in my code, that i seem not to be able to fix, is that upon making the form smaller, the width's of the panels are not decreased, but increased. I used a third panel to determine the the change is the resizing of the form, because I discovered, that the Witdh of the form != the width of placeable components.

Here is the code for the function i created to round 2 numbers (frmHelp_Dialog.my_round):

function TFrmHelp_Dialog.My_Round(number: real): integer;
var
  Decimal_value, Integer_value, snumber: string;
begin
  try
    snumber := floattostrF(number, fffixed, 12, 8);

    Decimal_value := copy(snumber, pos('.', snumber) + 1, length(snumber));
    Integer_value := copy(snumber, 1, pos('.', snumber) - 1);

    if Decimal_value[1] >= '5' then
    begin
      result := strtoint(Integer_value) + 1;
    end
    else
    begin
      result := strtoint(Integer_value);
    end;
  except
    beep;
    messagedlg
      ('An error occured during function "Round" excecution in Help_Dialog.pas.',
      mterror, [mbok], 0);
  end;
end;

Here is my code:

    unit Stats_u;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,
  System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, VclTee.TeeGDIPlus,
  VclTee.TeEngine, Vcl.ExtCtrls, VclTee.TeeProcs, VclTee.Chart, VclTee.series,
  Help_Dialog;

type
  TStats = class(TForm)
    Panel1: TPanel;
    Panel2: TPanel;
    Panel3: TPanel;
    Button1: TButton;
    Button2: TButton;
    Button3: TButton;
    procedure FormResize(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FormClose(Sender: TObject; var Action: TCloseAction);

  private
  var[enter image description here][1]
    Chart2: TChart;
    Original_Width: integer;

  const
    Panel_Ratio = 0.5;
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Stats: TStats;

implementation

{$R *.dfm}

uses Unit1;

procedure TStats.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  Stats.hide;
  form1.position := poscreencenter;
  form1.show;
end;

procedure TStats.FormCreate(Sender: TObject);
begin
  Stats.position := poscreencenter;
  // panels
  Original_Width := Panel3.left + Panel3.width;
  Panel2.width := Original_Width - Panel2.left;
  Panel3.SendToBack;
  Panel2.BringToFront;

end;

procedure TStats.FormResize(Sender: TObject);
var
  Current_Width: integer;
begin
  // get current width
  Current_Width := Panel3.left + Panel3.width;
  (*
    showmessage(IntToStr(Current_Width));
    showmessage(IntToStr(original_width));
  *)

  // --set anchors--
  Panel1.anchors := [aktop, akbottom, akleft];
  Panel2.anchors := [aktop, akbottom];

  // panel 1 resize:
  Panel1.width := Panel1.width + FrmHelp_Dialog.My_Round
    (0.1 * (Current_Width - Original_Width));

  Panel2.left := Panel1.width;
  Panel2.width := Panel2.width + FrmHelp_Dialog.My_Round
    (0.9 * (Current_Width - Original_Width));

  Original_Width := Current_Width;

end;

end.

Image During Runtime, not resized yet.

Regards, Romans

Upvotes: 2

Views: 3523

Answers (1)

Andreas Rejbrand
Andreas Rejbrand

Reputation: 108963

First, you should notice that the width of a control's client area is ClientWidth. Use that and not Width, which also includes any borders. This applies to forms as well.

Now, create a new VCL application and drop two TPanel controls on it.

Set Align = alLeft on the first one and Align = alClient on the second one.

Finally, add an OnResize handler for the form:

procedure TForm1.FormResize(Sender: TObject);
const
  Factor = 0.5;
begin
  Panel1.Width := Round(Factor * ClientWidth);
end;

Here, Factor is the fraction of the form's width that should be used by Panel1. It is a real number between 0 and 1. The fraction of the form's width that will be used by Panel2 is 1 - Factor.

For instance, if Factor = 0.5, the form will be split into two parts of the same size.

Upvotes: 5

Related Questions