Resizing a Control Set of Canvases in a Container

See my test project here:

I’m using a canvas as a custom image well. In a container control I add one of the wells and set it to be a control set. The container is dragged onto the main window. In the Open event of the window, I arrange more well’s based on the first one.

I’m having trouble wrapping my head around resizing these wells when the user resizes the window. I would like to have them properly spaced among each other and resized along with resizing the image they contain, but I probably should just start with having them space themselves properly.

I left out irrelevant picture code in the project. Also, I added in a couple of page panels as I have them in my main project.

Any help greatly appreciated. Thanks

This kind of placement you’re not going to get with control Locks. I believe the new AutoLayout feature for iOS can do it but until that’s part of desktop you need to position each well yourself. Here’s the changes I made that gets most of what you’re after… (assumes a square well and aligned top/left in each space)

  1. remove the Right and Bottom locks of MyPhotoWell1(0) on PhotosContainer so it doesn’t interfere with the custom positioning

  2. add this method to PhotosContainer as a public method. This does all the layout work.

[code]Sub placeWells()

Const NumControls = 12
Const NumColumns = 4
Const Spacing = 15

dim blockSize As integer = self.Width / 4 //divide the total width into 4 parts
dim wellSize As integer = blockSize - Spacing //the inset size of each block

dim b as MyPhotoWell
for i As integer = 0 to NumControls - 1 //position and size each well
b = MyPhotoWell1(i)
b.Left = (i mod NumColumns) * blockSize //(i mod 4) yields values 0, 1, 2, 3, 0, 1, 2, 3, 0,…
b.Top = (i \ NumColumns) * blockSize //(i \ 4) yields values 0, 0, 0, 0, 1, 1, 1, 1, 2,…
b.Width = wellSize
b.Height = wellSize

End Sub[/code]

  1. change PhotosContainer.init to this to use that placeWells method

[code]Sub Init()
dim b as MyPhotoWell
dim i as Integer

Const NumControls = 12

For i = 1 to NumControls - 1 // NumControls is the total number of photowells
b = new MyPhotoWell1

// All the new controls are located directly on top of MyPhotoWell(0).

// Workaround to avoid these newly created canvases from coming up behind
// we set Canvas invisible in the IDE and then make it visible here.
Canvas1.Visible = True
End Sub[/code]

  1. add to Window1 the Resizing event with this code so the wells are repositioned

Sub Resizing() PhotosContainer1.placeWells End Sub

Will, many thanks to you as that was exactly what I was looking for!

For resizing the image . . . In my database, I store the original and a thumbnail of the user’s picture. When the user drops an image onto the well, I currently create the thumbnail in the DropObject event based on the size of the well.

Should I now create the thumbnail based on the largest size a well can be resized to and store that? Then just call Invalidate for each well in the placeWells method?

Thank you