Container control only shows two of four buttons

I have a container control that has four canvases for custom buttons. It’s oversized, as it will be used in two places, each with different sizes so I figured I’d make it bigger and scale down as needed. The layout looks like this:

The four squares are the canvases. The container’s Resized event contains code to determine the size, and calculate the spacing between canvases, all stored in properties TransportWidth, TransportHeight, TransportButtonSpace:

TransportWidth = me.width
TransportHeight = me.height

//calculate the total width of all buttons. 
//buttons are square, so we use the height of the resized transport container
var totalbuttonwidth as integer = TransportHeight * 4
//subtract from width of container
var remainder as Integer = TransportWidth - totalbuttonwidth
//divide by the number of spaces between buttons
TransportButtonSpace = (remainder / 3)

Each canvases Paint event contains code like this:

(this is for the button all the way on the right)

var xpos as integer = (TransportHeight * 3) + (TransportButtonSpace * 3 )
g.DrawPicture(TransportFF, xpos , 0, TransportHeight, TransportHeight, 0, 0, TransportFF.Width, TransportFF.Height)

The canvas in the 3rd position is the same code, but the xpos calculation is done with a factor of 2, since there are two buttons to the left of it.

The problem is, when this runs, only the first and third buttons show, and I can’t figure out why the others aren’t:

Here’s a link to the project.

My most common problem is that the controls that do not show have a parent control which I’m not aware of. Could be the case with buttons 2 and 4.

Get a NilObjectException in the Paint event

Your icons will only show correctly if the transport width is at least 4 x the transport height.

Hmm. That’s strange. It’s working fine for me. 2021 r2.1 on Windows

It is - the non-scaled size is 1211x256 an the scaled size is 354x74. That’s 4.7x wider than it is tall.

I don’t think this is the case, but I’m not sure where I’d look for that.

Maybe a clue? I don’t know: When I change the locking settings on button #4, button #3 disappears. Neither 2 nor 4 ever appear though, regardless of the lock settings.

I took your project, locked the container to the window, replaced the images (they weren’t supplied and the cause of the NOE) and made a movie which shows what happens as the container is resized.

Agh. Sorry about the missing images. I originally set this up in a larger project, then dragged and dropped into a new one, so the links to the files must be to the old location. Here are the actual buttons.

I did the same as you did, locking it to the window and resizing. When you make it super wide, all the buttons appear, proportionally spaced but too far apart. When you make it too small they start to get cropped from the left, it looks like. but only buttons 2 and 4, which is what I don’t understand. All of the original buttons are 256x256, and the code in the Paint event for each canvas is essentially the same, just pointing to the different images:

This crops when resized:
g.DrawPicture(TransportFF, 0, 0, TransportHeight, TransportHeight, 0, 0, TransportFF.Width, TransportFF.Height)

But this doesn’t:
g.DrawPicture(TransportRW, 0, 0, TransportHeight, TransportHeight, 0, 0, TransportRW.Width, TransportRW.Height)

All four buttons show up for me. Xojo 2021r3.1 macOS 12.2

So I tried this on my mac today, 2021 R2.1 as well. it comes up correctly by default. But on Windows, the behavior is all over the place. Windows is the target platform for this.

Any ideas?

Can someone with 2021r3.1 on Windows give this a try and see if it works? I’m hesitant to upgrade in the middle of a large project, which is why we’re still on 2021r2.1

I installed 2021r3.1 on another machine and gave the project a try. Still the same results as 2.1 on Windows - the container control behaves in a totally different way than it does on the mac. So I take it this would be a bug? I just want to make sure I’m not doing something wrong in my code before I take the time to do add this to Feedback.

The ‘buttons’ do not appear to resize correctly when the control is resized on the Window.
I suspect that this may be a bug as I tried the project on 2016r4.1 (Windows 10) and it ran as expected when the Var statements were changed to Dim.

Try the workaround below.

Edit the Resize event to read

Sub Resized() Handles Resized
  TransportWidth = me.width
  TransportHeight = me.height

  // Set the button widths 
  FFButton.Width=TransportHeight
  PlayButton.Width=TransportHeight
  RWButton.Width=TransportHeight
  STOPButton.Width=TransportHeight
   
  //calculate the total width of all buttons. 
  //buttons are square, so we use the height of the resized transport container
  var totalbuttonwidth as integer = TransportHeight * 4
  //subtract from width of container
  var remainder as Integer = TransportWidth - totalbuttonwidth
  //divide by the number of spaces between buttons
  TransportButtonSpace = (remainder / 3)
  
End Sub

that did it - Thanks!