Hi,
normally, the apps I make are not resizable due to the fact that I can never get the controls to resize correctly.
Example:
I have a 700pixel wide window with 2 buttons underneath.
Both buttons are 200 pixels wide, and are alongside each other and centred.
I have tried all the different combinations of the little padlocks in the locking area, but whenever I make my window wider - the buttons never remain together and centred.
Either the space between the 2 buttons gets bigger and the buttons stay the same size, OR, 1 button gets bigger and ends up overlapping the other button?
Also, if I have a canvas which has an image as its backdrop, and is the same width as the window - when I make the window wider - the image obviously doesn’t stretch with the canvas - so I have no idea how to get past that problem.
I am obviously misunderstanding the concept of it - I thought the locking area was used to lock either the left, right, top, or bottom, and then resize the controls to adjust?
Can anyone shed some light on this?
Thank you all in advance.
I hope I have understood you correctly, maybe something like that?
test1
Thank you Axel,
That was exactly it !
It makes no sense to me though, as the top and left locks are set - so I would have expected that to make the left side of the left button stay where it is, and stretch / resize the button to the right.
Weird 
I had the same issue (and managed to figure it out myself) earlier, but I have it use fewer event handlers because I put the math in window.paint
Will that cause drawing slowdowns when things get more complex?
Tim,
I didn’t quite understand your question - what was it referring to?
What uses fewer event handlers?
Axels example does the button positioning math by calling a function on the window event handlers for Open, Resized, and Resizing. When I came up with the solution myself, I did the positioning math for my psuedo-toolbar buttons on the window event handler for Paint.
I was asking basically anyone who stumbles across the topic who might know if that would be calling the positioning math too often and if it’ll cause slowdowns.
It might vary by OS. Put System.Debuglogs in Paint and Resizing and watch when they fire. On my mac Paints are triggered from the blicking cursor in a TextField with a focusring, or clicking on a Pushbutton or switching focus.
So Paint fires quite often but it’d probably take a lot to notice a slowdown. But moving code from Paint to Resize should be easy enough for an unnoticeable optimization 
resizing will happen a lot on windows if live resize is turned on.
Some people put the button inside a container and have the container move about with the buttons as a group.
You can reduce the calc time by checking if the width changed since the last paint as the first test.
But put them right or left aligned and Xojo will do it all for you… they will follow the right if right aligned, and never need repainting if left aligned.
I found a way to manage the buttons that does not require too much calculus : peg them to a canvas. I noticed that resize works fairly well for textareas, rectangles and canvas that are covering most of the window. So I place a large canvas on the window, sets its padlocks all locked, and position the buttons relative to the bottom of the canvas :
Then I add code in the resizing event to have the buttons follow the lower edge of the canvas :
pushbutton1.top = Canvas1.top +Canvas1.height
pushbutton1.left = Canvas1.left
pushbutton2.top = Canvas1.top+Canvas1.height
pushbutton2.left = Canvas1.left+(Canvas1.width/2)-(pushbutton1.width/2)
pushbutton3.top = Canvas1.top+Canvas1.height
pushbutton3.left = Canvas1.left+Canvas1.width-pushbutton3.width
Sample project
What I personally was trying to do was to have 2 buttons side by side (separated by 20 pixels).
When the window is made wider - both buttons should remain side by side 20 pixels apart, but both stretch - so that the end result is both buttons looking the same as before (but both being wider).
I have enclosed a screenshot of how the 2 buttons look at the beginning (before the widow is widened).
If the window is widened to twice the size for example - the buttons should be aligned exactly the same, but both be wider.
Hope that made sense.
Screenshot
Thanks Michel - I will take a look at your project.
(I posted my last post before your post appeared - but explains my problem anyway)
[quote=86136:@Richard Summers]Thanks Michel - I will take a look at your project.
(I posted my last post before your post appeared - but explains my problem anyway)
:)[/quote]
I was trying to see your picture, but somehow it is corrupted. Nevertheless, I think you could use what I describe.
If you want the two buttons to stay in the middle of the canvas bottom, 20 pixels away from each other, here is the code in resizing event :
pushbutton1.top = Canvas1.top +Canvas1.height
pushbutton1.left = Canvas1.left+(Canvas1.Width/2)-(Pushbutton1.width)-10
pushbutton2.top = Canvas1.top+Canvas1.height
pushbutton2.left = Canvas1.left+(Canvas1.width/2)+10
Buttons padlock are closed on left, top and right. Bottom is unlocked. They do stretch the way you want without changing space between them.
I can’t explain properly what I am trying to say 
Your code works perfectly when the images are centred - thank you !
However - Here is a better explanation of my dilemma for non-centered buttons:
Create a 1000 pixel window.
Crreate a Canvas which is 960 pixels and centre it.
Create a button which is 470 pixels wide and align it to the left border of the canvas.
Create another button which is 470 pixels wide and align it to the right border of the canvas.
There is now a gap of 20 pixels between the buttons.
Now - when you make the window wider - I need the left button still left aligned - the right button still right aligned AND the same gap of only 20 pixels in-between
Hopefully that should fully explain it correctly.
Problem is there is no ‘centre’ alignment.
You have to do it in code.
To have the two buttons centred and 20px apart, one possible math is:
rightbutton.left = (self.width/2) + 10 'position the right hand button
leftbutton.left = rightbutton.left -20 - leftbutton.width
[code]Sub Resizing()
pushbutton1.width = (Canvas1.width/2)-10
pushbutton1.top = Canvas1.top +Canvas1.height
pushbutton1.left = Canvas1.left+(Canvas1.Width/2)-(Pushbutton1.width)-10
pushbutton2.width = (Canvas1.width/2)-10
pushbutton2.top = Canvas1.top+Canvas1.height
pushbutton2.left = Canvas1.left+(Canvas1.width/2)+10
End Sub
[/code]
Maybe this
Pushbutton1 - the left one, Locked only Left and Bottom
Pushbutton2 - right one. Locks bottom and Left (though Left or right doesn’t matter)
[code]Sub Resizing()
dim centerX As integer = Width / 2
PushButton1.Width = centerX - PushButton1.Left - 10
PushButton2.Left = centerX + 10
PushButton2.Width = Width - PushButton2.Left - PushButton1.Left
End Sub[/code]
I’m in the bath at the moment - I will check after I am all nice and clean
Thank you Michell, Will and Jeff - much appreciated.
I will let you know the outcome later
What you want is Apple’s fancy resizing/locking/pinning controls from Xcode 
Also note, the last line of my code sets PushButton2s Width differently than PushButton1. This is because an odd width can’t be laid out the same as an even width, there’s 1 extra pixel to account for (or maybe it’s 1 less?). Pushbutton2 is setup so it’s right edge is always the same gap size as the left-side gap of PushButton1.