[RESOLVED] stretching and relocating controls on form.stretch

[Españolita]

I wanted my controls to basically "zoom" in or out as the form was resized. I tried playing with dock and anchor but the results wasn't satisfactory. Controls were resized according to the form being resized, but the top,left always remained in the same position. The result of this was that controls overlapped as they got bigger.
So, I wrote the code below which works very well except that the percentage of zoom does not tally between the form and the controls. I know that is explained badly. I have attached screenshots to illustrate the point.
I think the error is somewhere in

Dim PercentageWidth As Double = (Me.Width - iOrigFormWidth) / 100
        Dim PercentageHeight As Double = (Me.Height - iOrigFormHeight) / 100

but I cannot see where I'm going wrong. Any help would be appreciated.

Private Sub frmPhoneme_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        iOrigFormWidth = Me.Width
        iorigformheight = Me.Height
        Dim indx As Integer = 0
        For Each ctrl As Control In Me.Controls
            ctrls(indx, 0) = ctrl.Top
            ctrls(indx, 1) = ctrl.Left
            ctrls(indx, 2) = ctrl.Height
            ctrls(indx, 3) = ctrl.Width
            indx += 1
        Next
    End Sub
 
    Private Sub frmPhoneme_ResizeEnd(sender As Object, e As System.EventArgs) Handles Me.ResizeEnd
        Dim PercentageWidth As Double = (Me.Width - iOrigFormWidth) / 100
        Dim PercentageHeight As Double = (Me.Height - iOrigFormHeight) / 100
        Dim indx As Integer = 0
        For Each ctrl As Control In Me.Controls
            ctrl.Top = CInt(ctrls(indx, 0) + (ctrls(indx, 0) * PercentageHeight))
            ctrl.Left = CInt(ctrls(indx, 1) + (ctrls(indx, 1) * PercentageWidth))
            ctrl.Height = CInt(ctrls(indx, 2) + (ctrls(indx, 2) * PercentageHeight))
            ctrl.Width = CInt(ctrls(indx, 3) + (ctrls(indx, 3) * PercentageWidth))
            indx += 1
        Next
    End Sub

original size
Attachment 96697

stretched
Attachment 96699

Shrunk
Attachment 96701

[stanav]

I'd use a TableLayoutPanel. Have the TLP docked to the form. The controls are then added and docked to the TPL's cells.

[Españolita]

Thanks for the suggestion Stanav. I tried what you suggested and it does lock each control into a cell as you say. When the form was made smaller, the buttons got smaller too but when the form was made bigger, the buttons stayed the same size. I docked each individual button into its cell in DockMode=Stretch and it resized the buttons accordingly.
I will stay with my coded version though, because I also want to resize the font in the labels and the buttons (to truly emulate a zoom-type function).
I originally thought that the problem lay in the percentage increase calculations

Dim PercentageWidth As Double = (Me.Width - iOrigFormWidth) / 100
        Dim PercentageHeight As Double = (Me.Height - iOrigFormHeight) / 100

I did some messing with the numbers and finally came up with the code below which allows me to shrink the form right down beyond any usable size and expand it to full screen without losing any of the buttons.

Dim PercentageWidth As Double = (Me.Width - iOrigFormWidth) / 540
        Dim PercentageHeight As Double = (Me.Height - iOrigFormHeight) / 400

But that leaves me with 2 questions.
1. Why do I need to divide by 540 on the width and 400 on the height?
2. Why are the two figures different?

[Inferrd]

I imagine they would be very close to the original size of the Form

Try substituting Me.ClientSize.Width and Me.ClientSize.Height for 540 and 400 respectively. (The Me.Width and Me.Height properties include the borders and Title Bar. These don't change size and including their dimensions in the calculations tends to skew the results, especially if you start with a very small Form.)


EDIT:

Sorry, I mean you have to use the original values, like:

' in Sub frmPhoneme_Load 
iOrigFormClientWidth = Me.ClientSize.Width
iorigformClientheight = Me.ClientSize.Height
       
'
'
 
Private Sub frmPhoneme_ResizeEnd(sender As Object, e As System.EventArgs) Handles Me.ResizeEnd
    Dim PercentageWidth As Double = (Me.Width - iOrigFormClientWidth) / iOrigFormClientWidth
    Dim PercentageHeight As Double = (Me.Height - iorigformClientheight) / iorigformClientheight

EDIT2: In fact, all the Size's should be based on the ClientSize:

' in Sub frmPhoneme_Load 
iOrigFormClientWidth = Me.ClientSize.Width
iorigformClientheight = Me.ClientSize.Height
       
'
'
 
Private Sub frmPhoneme_ResizeEnd(sender As Object, e As System.EventArgs) Handles Me.ResizeEnd
    Dim PercentageWidth As Double = (Me.ClientSize.Width - iOrigFormClientWidth) / iOrigFormClientWidth
    Dim PercentageHeight As Double = (Me.ClientSize.Height - iorigformClientheight) / iorigformClientheight

[Españolita]

Inferrd,
The idea is good and it resizes in a stable way, but the placing and sizing is too big (as in my stretched image in #1) but it is that way no matter what size I make the window, larger or smaller. Could ClientSize be based on the screen size rather than the window size?

[Inferrd]

You mean the controls overflow at the right hand edge? I'm not seeing that effect when I try it.

The Client Area of a form is the portion of the Form inside its Title Bar and margins, i.e. purely the grey area inside the blue margins in your pictures above. A Form has ClientRectangle and ClientSize properties. In fact, the positions of the Controls you place on a Form are relative to that ClientRectangle (grey area) such that if you set a Button's Location property as Button1.Location = New Point(0,0), then that (0,0) is the top left grey pixel in the window, not the top left pixel of the Form's Title Bar.


You might like to try amending your calculations as follows and see what happens:

Private iOrigFormClientWidth As Integer
Private iorigformClientHeight As Integer
Private ctrls(100, 3) As Integer
 
 
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
 
    iOrigFormClientWidth = Me.ClientSize.Width
    iorigformClientHeight = Me.ClientRectangle.Height
    Dim indx As Integer = 0
    For Each ctrl As Control In Me.Controls
        ctrls(indx, 0) = ctrl.Top
        ctrls(indx, 1) = ctrl.Left
        ctrls(indx, 2) = ctrl.Height
        ctrls(indx, 3) = ctrl.Width
        indx += 1
    Next
 
End Sub
 
 
Private Sub Form1_ResizeEnd(sender As Object, e As System.EventArgs) Handles Me.ResizeEnd
    Dim PercentageWidth As Single = CSng(Me.ClientSize.Width / iOrigFormClientWidth)
    Dim PercentageHeight As Single = CSng(Me.ClientSize.Height / iorigformClientHeight)
 
    Dim indx As Integer = 0
    For Each ctrl As Control In Me.Controls
        ctrl.Top = CInt(ctrls(indx, 0) * PercentageHeight)
        ctrl.Left = CInt(ctrls(indx, 1) * PercentageWidth)
        ctrl.Height = CInt(ctrls(indx, 2) * PercentageHeight)
        ctrl.Width = CInt(ctrls(indx, 3) * PercentageWidth)
        indx += 1
    Next
End Sub

[Españolita]

hmmm, I apologise. The first time, I dimensioned and assigned the variables at class level instead of assigning at Form_Load

Private iOrigFormClientWidth As Integer = Me.ClientSize.Width
Private iorigformClientHeight As Integer = Me.ClientSize.Height

I assume that since the form doesn't exist at the time I assigned the values, "Me" referred to the screen. which explained my results.
Changing it so that it is dimensioned at Class level and assigned in Form_Load works correctly.
thank you for your help. +rep