Drei Button gleichmässig verteilt

[kralle]

Moin,

entweder geht das nicht über Optionen oder eine Komponente oder ich sehe den Wald vor lauter Button nicht

Ich möchte am unteren Rand eines Formulars, waagerecht drei Button platzieren, die sich die Breite gleichmäßig teilen.
Wenn das Formular skaliert wird, sollen sich die Button anpassen.

Gibt es eine Komponente die das kann oder muss ich jedes mal die Formularbreite ermitteln, die Button-Größe neu berechnen und die Button neu positionieren?

Gruß Heiko

[theo]

Es kann schon sein, dass es dafür eine fertige Lösung gibt, aber bis ich das nachgeschaut und begriffen habe, habe ich es hundert mal "von Hand" gemacht.
Die Buttons liegen in dem Beispiel auf einem Panel, muss aber nicht sein.

Code: Alles auswählen

procedure TForm1.Panel1ChangeBounds(Sender: TObject);
begin
  Button1.Left:=0;
  Button1.Width:=Panel1.Width div 3;
  Button2.Width:=Button1.Width;
  Button3.Width:=Button1.Width;
  Button2.Left:=Button1.Width;
  Button3.Left:=Button2.Left+Button2.Width;
end;  

[Ally]

Hallo Kralle,

mit einer Zeile Code und dem Ankereditor kann man das erledigen.

Gruß Roland

[kirchfritz]

Hallo Kralle

geht auch nur im ObjektInspektor ohne Ankereditor und ohne Zeile Quellcode.
Benutze das Childsizing des Panels. Guckst Du hier:

3_Buttons_auf_Panel.png (14.9 KiB) 4581 mal betrachtet

[kralle]

Moin,

Ihr seit wie immer Klasse - Danke für die Hilfe.

Ich habe das jetzt so gelöst:

Code: Alles auswählen

procedure TForm1.FormCreate(Sender: TObject);
begin
 with Panel_Button_Verbindung Do
      Begin
        AutoSize := True;
        Caption:='';
        ChildSizing.ControlsPerLine:=3;
        ChildSizing.EnlargeHorizontal:= crsHomogenousChildResize;
        ChildSizing.EnlargeVertical:= crsScaleChilds;
        ChildSizing.HorizontalSpacing:= 10;
        ChildSizing.Layout:= cclLeftToRightThenTopToBottom;
        ChildSizing.LeftRightSpacing:=10;
      end;
end;          

Guten Rutsch ins Jahr 2024
wünscht Euch
Heiko

[Ally]

Hallo Kralle,

ich wünsch dir auch einen guten Rutsch ins Jahr 2024.

Aber noch mal zurück zu deiner Aufgabenstellung:

Ich möchte am unteren Rand eines Formulars, waagerecht drei Button platzieren, die sich die Breite gleichmäßig teilen.
Wenn das Formular skaliert wird, sollen sich die Button anpassen.

Du hast jetzt zwar die Verteilung der Buttons in FormCreate implementiert, aber wie sorgst du dafür das die Buttons am unteren Fensterrand bleiben und sich die die Breite gleichmäßig teilen, wenn die Fenstergröße verändert wird?

Gruß Roland

[siro]

Ich beziehe mich mal auf Kirchfritz.
Der entscheidenen Punkt ist das ChildSizing vom Panel,
Das war mir übrigens auch neu, dass man die Buttons dann so ausrichten kann.
Danke für die Info.

Und man muss tatsächlich nicht eine Zeile programmieren.

Man setzt ein Panel aufs Formular
In den Eigenschaften Align des Panels setzt man alBottom.
Dann setzt man 3 Buttons auf das Panel.
In den Eigenschaften des Panels ChildSizing setzt man die Eigenschaften wie im Bild.
Mit den zusätzlichen Eigenschaften vom ChildSizing kann man das noch hübschen,
zwischen den Tasten einen Abstand (HorizontalSpacing)
und/oder links und rechts am Rand einen zusätzlichen Abstand (LeftRightSpacing)

Anbei mal ein Beispiel Code (bzw. Projekt, Code hab ich ja nix geschrieben... )

project1.zip

(139.46 KiB) 54-mal heruntergeladen

ChildSize3.png (42.99 KiB) 4501 mal betrachtet

[kralle]

Moin Roland,

Du hast jetzt zwar die Verteilung der Buttons in FormCreate implementiert, aber wie sorgst du dafür das die Buttons am unteren Fensterrand bleiben und sich die die Breite gleichmäßig teilen, wenn die Fenstergröße verändert wird?

Damit die Button "unten" bleiben, hat das umgebende Panel die Eigenschaft

Code: Alles auswählen

Align := alBottom;

Und damit sich die Button auf die Breite gleichmäßig aufteilen, ist beim Panel die Eigenschaft

Code: Alles auswählen

ChildSizing.ControlsPerLine:=3;

zuständig.

Guten Rutsch ins Jahr 2024
wünscht
Heiko

[wp_xyz]

Also ich finde das Feature, dass sich die Buttons in der Breite der Fensterbreite anpassen, etwas gewöhnungsbedürftig. Würde so ein Formular auf die volle Breite meines 2560er Monitors maximiert, wäre jeder der drei Buttons ein schmaler Streifen von etwa 850x25 Pixeln, was für mich sehr ungewöhnlich aussieht.

Stattdessen würde ich ein weiteres bottom-aligned Panel auf das Formular setzen; das Panel mit den Buttos würde ich in dieses neue Panel versetzen und sein Align auf alNone zurücksetzen; stattdessen mit dem Anchor-Editor rechts und oben am Parent-Panel verankern. Beide Panels bekommen AutoSize = true. Damit alle drei Buttons in der Breite gleich bleiben (unabhängig von der Caption) setze ich ihr Constraints.MinWidth auf die Width des Buttons mit der längsten Caption.

Man kann zur optischen Abtrennung der Buttons vom Rest des Formulars auch noch ein horizontales "top-line" Bevel in das Parent-Panel geben (dann wäre allerdings die Verankerung des Button-Panels oben zu ändern).

Siehe Mini-Projekt im Anhang.

Übrigens: Es gibt auch ein fertiges Button-Panel...