Resize PictureBox at runtime

1

I’m trying to reize a PictureBox and going around in circles and not getting very far.

I’m designing the app for portait only, so the width (set at 80% in the IDE) will need to be the same for the height which I obviously need to change at runtime for different screen sizes.

From the documentation I’ve found and placed this code in my form, but it refuses to play ball… Any help?

Function frmSubmitScores_onshow()
    Dim actualHeight = PictureBox1.getBoundingClientRect().height
    Dim actualWidth = PictureBox1.getBoundingClientRect().width
    PictureBox1["height"] = actualWidth
    PictureBox1["width"] = actualWidth
End Function
2

Try this:

    PictureBox1.Width = actualWidth
    PictureBox1.Height = actualWidth
3

I’m sure I tried that with no luck, I have just retried it and still not playing ball.

I had a thought that it was not firing because I also needed it in the On_Resize function too since I’m running in browser and then trying different phone sizes, so I now have in both OnLoad and OnResize:

Function Form1_onresize()
    Dim actualHeight = picScore.getBoundingClientRect().height
    Dim actualWidth = picScore.getBoundingClientRect().width
'    actualWidth = picScore.width
    picScore.height = actualWidth
    picScore.width = actualWidth
    MsgBox (actualWidth) 
End Function

If I run this and resize, I get a message box with nothing printed in it - actualWidth has no value, (is Null?). When I uncomment line 3 in the Function I get a result of 0.

Interestingly, when I type picScore. I do not see “height” in the autofill dropdown lists, almost like there is no such property.

Running latest version of NS Basic, Windows 64x, Chrome. I’m using the Bootstrap 4 Camera if that makes any difference.

So after these changes, I see no picture after choosing one, it’s obviusly resizing the PictureBox to 0,0

4

Any update on this? Anyone know how I can get this working?

5

For drawing, I am using something like the following in the resize event:

PictureBox1.Height= Form1.Height - anyoffset
PictureBox1.Width= Form1.Width
PictureBox1.Top = anyoffset
PictureBox1.refresh()

Canvas1 = PictureBox1.getContext(“2d”)
Canvas1.height = Form1.Height - anyoffset
Canvas1.width = Form1.Width
Canvas1.Top = anyoffset

6

thanks @silvercoder - I’ll have a go at this later today (being 2am now). Have you tried this code on a phone or just in a browser? My gut feeling is that the resize event won’t be called on a phone because it’s not actually getting resized?

7

Actually, I put the code in a function called in the onshow and resize events. Works on phone and desktop. Relating the size to the dimensions of a form (or, maybe, a container) is the only way I ever found of doing this.

8

What you guys are doing may be different but I’ve used css to resize my images based on screen size. Here’s a sample:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="https://discuss.appstudio.dev/user_avatar/discuss.appstudio.dev/appstudiosupport/45/871_2.png" width="350" height="350">

</body>
9 
PictureBox1.style.width = "500px"
PictureBox1.style.height = "250px"

…works for me.