delphilayoutscalingvcldelphi-10.1-berlin

Delphi: Automatic scaling of GridPanel in frame


I've got a single row GridPanel full of buttons in a frame which I wan't to scale proportionally when either the height or width gets changed.

Here's the layout of the frame in a form

Before posting I set the alignment to alClient to use the parent's full size, but I don't know what to do about scaling.

What would you suggest?


Solution

  • Within the GridPanel you have a ColumCollection with four (acc. your image) TColumnItems.

    For each TColumnItem, set the SizeStyle property to ssPercent (the default) and the Value property to 25.

    Because the other columns sizes are adjusted automatically when you edit one column, it is easier to edit these values when changing the form (or frame in your case) view to text. Right-click on the frame and select View as Text.

    It looks as follows when edited.

      object GridPanel1: TGridPanel
        Left = 0
        Top = 0
        Width = 426
        Height = 108
        Align = alClient
        Caption = 'GridPanel1'
        ColumnCollection = <
          item
            Value = 25.000000000000000000
          end
          item
            Value = 25.000000000000000000
          end
          item
            Value = 25.000000000000000000
          end
          item
            Value = 25.000000000000000000
          end>
        ControlCollection = <
        ...
        >
        RowCollection = <
          item
            Value = 100.000000000000000000
          end>
        TabOrder = 0
        object Button1: TButton
          Left = 1
          Top = 1
          Width = 106
          Height = 106
          Align = alClient
          Caption = 'Button1'
          TabOrder = 0
          ExplicitLeft = 40
          ExplicitTop = 32
          ExplicitWidth = 75
          ExplicitHeight = 25
        end
        ...other buttons
        ExplicitWidth = 320
        ExplicitHeight = 153
      end
    

    Your response:

    That is something I forgot to mention I had already done. To clarify, my issue has to do with forcing a certain ratio (in my case 1:1) of height to width while resizing the frame (or possibly the surrounding form).

    I assume the ratio 1:1 applies to each button, so 4:1 for the whole frame.

    Because the user may resize either the height or the width (or both) of the form, and we only have the common OnResize event to lean on, I suggest the following:

    Declare two private variables in the form

        OldCW, OldCH: integer; // for client width and client height respectively
    

    and the OnResize event of the form:

    procedure TForm4.FormResize(Sender: TObject);
    begin
      if ClientWidth <> OldCW then
        ClientHeight := ClientWidth div 4
      else
        ClientWidth := ClientHeight * 4;
      OldCW := ClientWidth;
      OldCH := ClientHeight;
    end;
    

    Finally, for future questions of yours: Please explain what you have already tried to solve the problem, and why those attempts failed.