Xojo Floating-Objects UI (David Cox)

Watch the video here.

XDC 2019 speaker, David Cox
Displaying data in Xojo is easy with built-in features such as TextField, TextArea and ListBox. Pictures are often a more attractive and intuitive way to present information, but the built-in controls cannot easily display a grid of pictures similar to how you might see with Finder (Mac) or Explorer (Windows). Watch David show you how to build a flexible custom control that can display a selectable grid of images with many other features such as text titles, scrolling, resizing, fit and flow.

Haven’t watched the video, yet. Can I get the source-code?

Here is the positioning code you need to call for EVERY object to display (presumably cycling through an array of containers). You need to tell it the total number of items to be displayed, how wide and high they are, the width of the available area (eg a container you’re embedding them on), the padding gaps between each item, any left/top margin to shove them over/down.

The top/left results for your container item are returned as a tab-delimited string. On first display, I embed the containers in a negative location off screen. On screen resize, I cycle through this array of containers and just move them to their new locations.

For Web 2.0 projects I will try to use the Flexible layout, but this method below works across Desktop and Web.

[code]Protected Function getGridLocationsWAD(objectNumberInArray As Integer, objectWidth As Integer, objectHeight As Integer, availableWidth As Integer, horizontalGap As Integer, verticalGap As Integer, leftMargin As Integer = 0, topMargin As Integer = 0) as String
Dim numAcross As Integer
Dim leftPosition As Integer
Dim topPosition As Integer

if objectWidth = 0 or (objectWidth + horizontalGap) = 0 then
Return commonStrings.tab
end if

numAcross = availableWidth \ (objectWidth + horizontalGap)

leftPosition = (objectNumberInArray Mod numAcross)
leftPosition = leftPosition * (objectWidth + horizontalGap)
leftPosition = leftPosition + leftMargin

topPosition = floor(objectNumberInArray / numAcross)
topPosition = topPosition * (objectHeight + verticalGap)
topPosition = topPosition + topMargin

Return commonStrings.getLargeIntegerWAD(leftPosition) + commonStrings.tab + commonStrings.getLargeIntegerWAD(topPosition) 'return top left X/Y position as tab-delimited string

End Function[/code]