I see several app with pic background fixed to different size of phone.from what i see,appstudio pic background just fixed to its len and width.could the ide expand the pic background to responsive app size.does nsbasi team need to tweak a bit to this feature or there is already a solution? Best rdgs,tst
You might try the following: Use two images at 0,0 of a background form (first in the list of forms). Since this method stretches/shrinks the image, it is best to use one designed for portrait and the other for landscape. One image can of course be used if the stretching/shrinking is not an issue. When window_onresize() or window_onorientationchange() are triggered, execute the following:
If window.innerHeight < window.innerWidth Then 'landscape picMap.hide() 'the portrait picture picMapL.show() 'the landscape picture picMapL.refresh() Else 'portrait picMap.show() picMapL.hide() picMap.refresh() End If resize = picMap.style resize.width = "100%" resize.height = "100%" resize = picMapL.style resize.width = "100%" resize.height = "100%" picMapL.refresh() picMap.refresh()
I type Function window_ontrsize()
(2) image2 refuse to snap to 0,0 in responsive form
(3)chrome says (pwa) app must be started from a server for pwa support,note:after saving,i only can deploy to local folder.
(4) both image doesn’t expand as there is not Image1.refresh()
@tst - I don’t think the code you included is your actual code. Could you correct it?
How to create a background form to show a picture that resizes automatically as the window dimensions are resized:
Create a new project with just one form and put a PictureBox1 object on the form positioned at 0,0. Set this forms position to absolute and the screenMode to Full Screen. In your final application this form needs to be first form in your Project Properties list of forms.
Put this code on the form:
pBackground = PictureBox1.getContext("2d") ImageBackground=new Image() Function ImageBackground_onload() pBackground.drawImage(ImageBackground,0,0) End Function Sub Main() ImageBackground.src = "mypicture.jpg" 'see below Call window_onresize() End Sub Function window_onresize() resize = PictureBox1.style resize.width = "100%" resize.height = "100%" PictureBox1.refresh() End Function
Change “mypicture.jpg” to the name of a picture you want to use as the background image. It must be in the extraFiles of the Project Properties and in your new test project’s folder. You need to know the width and height of your picture. Enter them in the height and width properties of this PictureBox1.
Run the app locally (F5). The picture will display stretched to fit. Now resize the browser window. As you continue to change the width and height of the browser, the picture will resize to fit.
In my previous example the code allows for two different pictures to be displayed depending on the orientation of the window. This helps to reduce some stretching distortion to a minimum when using a phone rotating from portrait to landscape and back.
Thanks a lot for the code!really appreciate…rdgs,tst