Forum > LCL
Understanding Constraints
majolika:
Hello! First of all — a short introduction.
For self-education purposes, I am writing a small game: Mine Sweeper with RPG influence. Since I am completely unfamiliar with LCL, my development cycle looks like writing code → google → RTFM and repeat. But from time to time I really get stuck.
Now I am trying to figure out how Constraints work. I am using Lazarus 3.6 on Windows 10 if it matters.
As it is said in the documentation, Constraints have the highest priority above Aligning, Anchoring and so on, but maybe I understand something wrong. As I see, it works at design stage, but not at runtime.
Below is my test code.
Most of controls have MinHeight and/or MinWidth set.
When I set TForm1.AutoSize things go wrong. And when I resizing the main window manually things go even worse.
No doubt I'm missing something or misunderstand how Constraints work. But what?
In attach — published project,
screenshot 1 is what I expect (approximately),
screenshot 2 is what I get.
--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---implementation {$R *.lfm} procedure TForm1.Panel1Resize(Sender: TObject);begin Label3.Top := ( Panel1.Height - (Label3.Height + Image2.Height) ) div 2;end; procedure TForm1.FormCreate(Sender: TObject);begin Self.AutoSize := True;end; procedure TForm1.Button_FormHeight_minus_10Click(Sender: TObject);begin self.Height := self.Height - 10;end; procedure TForm1.Button_FormHeight_plus_10Click(Sender: TObject);begin self.Height := self.Height + 10;end; procedure TForm1.Button_FormWidth_minus_10Click(Sender: TObject);begin self.Width := self.Width - 10;end; procedure TForm1.Button_FormWidth_plus_10Click(Sender: TObject);begin self.Width := self.Width + 10;end; end.
majolika:
// still not able to edit messages but anyway...
I'm planning that my main window will have top and bottom panels (anchored to the top and bottom of the main form) and the remaining client area will be taken by PaintBox. And when in the runtime I will be changing size of PaintBox the main window will change its size automatically. Of course, the main window should not be only autosized, but also change position. Perhaps it will be necessary to come up with a handler for TForm.OnResize, but I'll think about it a little later.
TRon:
start new (test) project
1. place first panel on form
2. set the align property of first panel to alTop
3. place second panel on form
4. set the align property of second panel to alBottom
5. place paintbox on form
6. set the align property of paintbox to alClient
7. Set constraints of paintbox to something desirable (you would have to change these at runtime according to your board size). for example I set them to 100 for both min and max in both directions
8. get back to the form properties, set autosize to true (might be you need to do that at runtime in order to avoid the crash you mentioned)
9. key change: set borderstyle to bsNone (*).
now try and run to see if that matches your criteria. The rest of the components placements and behaviour depends on these 3 components to be in place correctly.
(*) this can also be toolwindow in case you wish to have it look like a 'normal' window. The key point is to make the window non user resizeable.
majolika:
--- Quote from: TRon on January 25, 2025, 08:55:17 pm ---now try and run to see if that matches your criteria.
--- End quote ---
Thanks, TRon!! It works. Not quite what I expected, but... I'll think about it some more.
Anyway that's only a half of a battle. Now I need to understand why it works and why it works that way.
It seems to me that constraints work only with autosized controls (or more precisely — non user resizeable). But what's the logic?
I'm not a type of men who like ready-made solutions, I'm always try to understand the meaning of things, the logic of how things works.
Thanks again for your patience!
TRon:
The theory behind it is explained in the following wiki articles
- anchor sides
- anchors example
- autosize/layout
If you like reading as much as I am then you probably end up placing some components and fiddle with things to match the required behaviour ;D
Note that even the order in which you place components could influence behaviour.
The anchoring and sizing design has gone through a major overhaul since their introduction to add more detailed control but it can work confusing.
Navigation
[0] Message Index
[#] Next page