Dialog Layout

[HobbyProgrammer]

Hallo,

ich habe mal wieder ein kleines Layout-Problem.
Ich habe mir folgenden Dialog zusammengebaut.

Dialog.jpg (18.77 KiB) 6162 mal betrachtet

Soweit so gut. Aber irgendwie schaffe ich es nicht, das beim Ändern der Breite des Dialogs die Labels auf der linken Seite bleiben
und die Buttons auf der rechten Seite. Nur die Editfelder 'ImageFile' und 'Boot-Track File' sollen sich in der Größe Ändern.
Wäre schön wenn mir jemand helfen kann.
Den Quellcode habe ich als ZIP angehängt.

Grüße
HobbyProgrammer

file_dialog.zip

(2.65 KiB) 124-mal heruntergeladen

[wp_xyz]

Ja, mit dem ChildSizing tut man sich schwer, die Controls so auszurichten wie du erwartest. Man könnte in das Panel1 ein links-align Panel für die Labels, ein zentriertes Panel für die Edits und die Checkbox, sowie ein rechts-aligntes Panel für die Buttons stecken, in denen man jeweils die Controls per ChildSizing in 1 Spalte vertikal verteilt (plus ggfs Bevel mit Shape=bsSpacer als Abstandshalter). Aber da ist es schwer die Labels und Buttons zu den Edit-Controls exakt zu zentrieren.

Ich habe dann probiert, die Controls per Anchoring anzurichten, und da kommt man zu einem vernünftigen Ergebnis, allerdings mit etwas zusätzlichem Code. Grundidee ist, die Labels mit ihrer linken Seite an der linken Seite von Panel1 anzuheften. Das Edit hinter dem längsten Label wird mit seiner linken Seite an der rechten Seite dieses Labels verankert - das kann ein Problem sein, wenn bei einer anderen Sprache ein anderes Label länger wird... Die Buttons werden rechts an der rechten Seite von panel1 verankert. Und die rechts Seite der Edits sind an der linken Seite der Buttons verankert. Vertikal sind Labels und Buttons mittig zu den Edit-Controls ausgerichtet (die Labels brauchen dann auch kein Layout=tlCenter mehr)

Problematisch wird es mit dem AutoSize von Panel1, denn wenn Controls sowohl links als auch rechts floaten können, macht Autosize eigentlich keinen Sinn, und die IDE verabschiedet sich mit einem Absturz... Daher Panel1.AutoSize = false setzen, und die nötigen Rechnungen zur Laufzeit durchführen, z.B. im FormShow-Handler. Das Setzen der Constraints spiele eine wichtige Rolle, dass das dann funktioniert, und man muss auch die BorderSpacings richtig mitrechnen. - Ich mag das jetzt nicht alles beschreiben, schaue dir einfach den beigefügten Code an. Im Screenshot sieht man, dass bei einem horizontal weit aufgezogenen Formular die Edits sich entsprechend anpassen, und die anderen Controls an ihrer stelle bleiben.

[KodeZwerg]

Hier mein Vorschlag, realisiert über simple pro-zeile-ein-panel-technik und per Align und BorderSpace ausgerichtet.
Ich hoffe es hilft.

Bild_2023-07-18_024126442.png (9.37 KiB) 6131 mal betrachtet

[HobbyProgrammer]

Guten Morgen,

@wp_xyz
Mir dem von Dir Vorgeschlagenen Einsatz von zusätzlichen Panels zur 'Kapselung' der Labels usw. habe ich auch schon experimentiert und bin dabei dann auf das Problem der horizontalen Ausrichtung der Labels zu den Editfeldern gestoßen. An den Einsatz von zusätzlichem Code für das gewünschte Align und Resizing habe ich auch schon gedacht. Nachdem Du mir nun aus berufenem Munde die Vorgehensweise vorschlägst war ich wohl nicht ganz falsch mit meinem Gedankengang. Ich schaue mir Dein Bespiel gerne an.

@KodeZwerg
Danke auch für Deinen Vorschlag. Auch diesen werde ich mir gerne ansehen.

Güße
HobbyProgrammer

[KodeZwerg]

Ja schau es Dir mal an, bei mir kommt 0% Quelltext zum Einsatz, alles über LCL geregelt, falls es überhaupt so ist wie Du es haben wolltest

[HobbyProgrammer]

Beide Vorschläge sehen gut aus.
Ich habe mich für die Vorgehensweise von wp_xyz entschieden. Ich habe den Dialog noch derart angepasst das nur die beiden Editcontrols sich in der Breite ändern. Auch habe ich die einzelnen Controls auf 2 Panels aufgeteilt. Da ich von diesem Dialog nicht immer alles brauche, kann ich nun die nicht benötigten über das jeweilige Panel ausblenden.

Vielen dank für den Denkanstoß. Hab wieder etwas dazugelernt.

[Mathias]

Ich habe da noch eine erweiterte Version des Dialogs,
Dabei wird der Inhalt der ComboBox in eine XML gespeichert.

[wp_xyz]

bei mir kommt 0% Quelltext zum Einsatz, alles über LCL geregelt

Sorry, da muss ich dazwischengrätschen: Das funktioniert nur, wenn der User immer auf demselben Betriebssystem mit denselben Schriftarten unterwegs ist, und wenn keine Übersetzung in andere Sprachen verlangt wird. Wenn in dem anderen Betriebssystem die Label-Schriftart größer ist als beim Design wird wegen des AutoSize=false Text abgeschnitten.

Wenn das nicht der Fall ist, dann ist die Lösung natürlich super und sehr einfach.

[KodeZwerg]

bei mir kommt 0% Quelltext zum Einsatz, alles über LCL geregelt

Wenn in dem anderen Betriebssystem die Label-Schriftart größer ist als beim Design wird wegen des AutoSize=false Text abgeschnitten.

Nun nicht mehr, und es bleibt bei mir simpel
Danke für den Einwand.

Code: Alles auswählen

function GetFontSize(const AText: String; const AFont: TFont; out AWidth, AHeight: Integer): Boolean;
var
  LBMP: TBitmap;
begin
  Result  := False;
  AWidth  := 0;
  AHeight := 0;
  LBMP    := TBitmap.Create;
  try
    LBMP.Canvas.Font.Assign(AFont);
    AWidth  := LBMP.Canvas.TextWidth(AText);
    AHeight := LBMP.Canvas.TextHeight(AText);
    Result  := ((AWidth <> 0) or (AHeight <> 0));
  finally
    LBMP.Free;
  end;
end;

{ TForm1 }

procedure TForm1.FormShow(Sender: TObject);
var
  w, h: Integer;
begin
  if GetFontSize(lblLabel.Caption, Self.Font, w, h) then
    begin
      Inc(h, 17);
      Inc(w, 10);
      pnlFileImg.Height  := h;
      pnlTypeImg.Height  := h;
      pnlFileBoot.Height := h;
      pnlLabel.Height    := h;
      pnlStamp.Height    := h;
      pnlData.Height     := h;
      pnlStamp.Height    := h;
      lblFileImg.Width   := w;
      lblTypeImg.Width   := w;
      lblFileBoot.Width  := w;
      lblLabel.Width     := w;
      cbStamp.BorderSpacing.Left := w + 5;
    end;
end;

Mfg, KodeZwerg

[HobbyProgrammer]

Ich finde das Autoresize über die LCL doch die bessere Wahl. Denn da ist schon alles drin was dann auch z.B. Cross-Platform Linux/Windows funktioniert.
Sobald der Dialog fertig ist werd ich den gerne hier nochmal zur Ansicht Hochladen.

[wp_xyz]

bei mir kommt 0% Quelltext zum Einsatz, alles über LCL geregelt

Nun nicht mehr, und es bleibt bei mir simpel

Schon klar, aber der Vorteil von "0% Quelltext" trifft nun nicht mehr zu.

Man muss sich einfach auf einen Weg entscheiden - viele Wege führen ans Ziel, und oft kann man gar nicht sagen, welcher der bessere ist.

Ich selbst kannte lange Zeit den Anchor-Editor und das Anchoring nicht und habe viele Layouts per Code plattform-unabhängig gemacht. Aber man muss sich halt alles genau überlegen und verliert Flexibilität (jede spätere Layout-Änderung muss man im Code quer-prüfen). Mit dem Anchor-Editor und AutoSize wird das alles sehr einfach, zumindest solange man ein Layout stur von links nach rechts und von oben nach unten verankert. Kompliziert wird's nur wenn man Controls auch rechts oder unten verankert und AutoSize haben möchte; dann muss man auf das AutoSize verzichten und selbst die gewünschte Größe setzen oder ausrechnen (im letzteren Fall verliert man dann auch den Vorteil, den Code nach einer Layout-Änderung nicht anpassen zu müssen).

Seit dem ich den Anchor-Editor beherrsche (am Anfang ist der Einstieg nicht ganz einfach...), mache ich alle Formulare, bei denen die geringste Chance besteht, dass sie Crossplattform werden, auf diese Weise.