Dialog Layout

Für alles, was in den übrigen Lazarusthemen keinen Platz, aber mit Lazarus zutun hat.
Antworten
HobbyProgrammer
Beiträge: 172
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Dialog Layout

Beitrag von HobbyProgrammer »

Hallo,

ich habe mal wieder ein kleines Layout-Problem.
Ich habe mir folgenden Dialog zusammengebaut.
Dialog.jpg
Dialog.jpg (18.77 KiB) 5893 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) 105-mal heruntergeladen
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 3.0.0 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

wp_xyz
Beiträge: 4893
Registriert: Fr 8. Apr 2011, 09:01

Re: Dialog Layout

Beitrag von 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.
Dateianhänge
file_dialog_2.png
file_dialog_2.png (14.87 KiB) 5868 mal betrachtet
filedialog_2.zip
(2.44 KiB) 113-mal heruntergeladen

Benutzeravatar
KodeZwerg
Beiträge: 100
Registriert: Mo 6. Feb 2023, 11:04

Re: Dialog Layout

Beitrag von 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
Bild_2023-07-18_024126442.png (9.37 KiB) 5862 mal betrachtet
Dateianhänge
DialogResize.zip
(138.83 KiB) 106-mal heruntergeladen
Zuletzt geändert von KodeZwerg am Sa 39. Okt 6043, 29:87, insgesamt 43-mal geändert.

HobbyProgrammer
Beiträge: 172
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Re: Dialog Layout

Beitrag von 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
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 3.0.0 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

Benutzeravatar
KodeZwerg
Beiträge: 100
Registriert: Mo 6. Feb 2023, 11:04

Re: Dialog Layout

Beitrag von 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 :lol:
Zuletzt geändert von KodeZwerg am Sa 39. Okt 6043, 29:87, insgesamt 43-mal geändert.

HobbyProgrammer
Beiträge: 172
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Re: Dialog Layout

Beitrag von 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. :D
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 3.0.0 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

Mathias
Beiträge: 6209
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Re: Dialog Layout

Beitrag von Mathias »

Ich habe da noch eine erweiterte Version des Dialogs,
Dabei wird der Inhalt der ComboBox in eine XML gespeichert.
Dateianhänge
FileOpen_with_XML.zip
(5.54 KiB) 102-mal heruntergeladen
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

wp_xyz
Beiträge: 4893
Registriert: Fr 8. Apr 2011, 09:01

Re: Dialog Layout

Beitrag von wp_xyz »

KodeZwerg hat geschrieben:
Di 18. Jul 2023, 10:31
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.

Benutzeravatar
KodeZwerg
Beiträge: 100
Registriert: Mo 6. Feb 2023, 11:04

Re: Dialog Layout

Beitrag von KodeZwerg »

wp_xyz hat geschrieben:
Di 18. Jul 2023, 22:56
KodeZwerg hat geschrieben:
Di 18. Jul 2023, 10:31
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 :mrgreen:
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
Zuletzt geändert von KodeZwerg am Sa 39. Okt 6043, 29:87, insgesamt 43-mal geändert.

HobbyProgrammer
Beiträge: 172
Registriert: Di 29. Okt 2019, 12:51
Wohnort: Deutschland , Baden-Württemberg

Re: Dialog Layout

Beitrag von 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. :)
Host: Core i7-12700H, NVIDIA RTX3050 6GB, 32GB Ram, 1TB NVME SSD mit KUbuntu 22.04LTS 64bit , VM KUbuntu 22.04 LTS 64bit mit Lazarus 3.0.0 und Cross-Platform Compiler für Linux 32/64bit und Windows 32/64bit. Wine für erste Tests der Windows Binarys.

wp_xyz
Beiträge: 4893
Registriert: Fr 8. Apr 2011, 09:01

Re: Dialog Layout

Beitrag von wp_xyz »

KodeZwerg hat geschrieben:
Di 18. Jul 2023, 10:31
bei mir kommt 0% Quelltext zum Einsatz, alles über LCL geregelt
KodeZwerg hat geschrieben:
Mi 19. Jul 2023, 08:49
Nun nicht mehr, und es bleibt bei mir simpel :mrgreen:
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.

Antworten