user9672569
user9672569

Reputation:

How align a Button to Center, or Left, or Right on position below a Panel?

I want know how align a Button to Center, or on extreme Left, or on extreme Right on position below a Panel.

My trouble is that every time when Form is resized the Button never stays on same position.

Eg =>

enter image description here

enter image description here

Upvotes: 3

Views: 4024

Answers (2)

Use a TRelativePanel as a layout component. First, put your panel upperPanel in it. Set the AlignHorizontalCenterWithPanel and AlignTopWithPanel to True. Then, drop your button in there and set Below and AlignRightWith both to upperPanel.It looks like this

More info: Using the Relative Panel

The DFM (shortened for convenience) looks somehow like this:

object Form1: TForm1
  object RelativePanel1: TRelativePanel
    Left = 0
    Top = 0
    Width = 537
    Height = 169
    ControlCollection = <
      item
        Control = upperPanel
        AlignBottomWithPanel = False
        AlignHorizontalCenterWithPanel = True
        AlignLeftWithPanel = False
        AlignRightWithPanel = False
        AlignTopWithPanel = True
        AlignVerticalCenterWithPanel = False
      end
      item
        Control = collapseButton
        AlignBottomWithPanel = False
        AlignHorizontalCenterWithPanel = False
        AlignLeftWithPanel = False
        AlignRightWith = upperPanel
        AlignRightWithPanel = False
        AlignTopWithPanel = False
        AlignVerticalCenterWithPanel = False
        Below = upperPanel
      end>
    Align = alTop
    BevelOuter = bvNone
    TabOrder = 0
    DesignSize = (
      537
      169)
    object upperPanel: TPanel
      Left = 143
      Top = 3
      Width = 250
      Height = 41
      Align = alTop
      Caption = 'upperPanel'
      Color = clSilver
      ParentBackground = False
      TabOrder = 0
    end
    object collapseButton: TButton
      Left = 359
      Top = 50
      Width = 34
      Height = 25
      Anchors = []
      Caption = '^'
      TabOrder = 1
    end
  end
end

Upvotes: 5

Tom Brunberg
Tom Brunberg

Reputation: 21045

In the forms OnResize event, after the panels repositioning, align the button to the panel with one of the following:

//  Button1.Left := Panel1.Left; // left
//  Button1.Left := Panel1.Left + Panel1.Width div 2 - Button1.Width div 2; // middle
//  Button1.Left := Panel1.Left + Panel1.Width - Button1.Width; // right

Upvotes: 4

Related Questions