Scrollable TGridLayout question

[sjordi 38]

Hi all,
After three days googling and reading about the same question... it looks like I didn't find a valid answer.

I have to display glyphs in a TGridLayout, because I create those glyphs dynamically.
Each of them represent either a folder icon or a file icon.
I can click on them and respond the way I want.

Problem is that I need my GridLayout to scroll vertically when I reach more rows than displayed on screen. For this I resize the layout taller than the form's height.

On desktops, it's fine, I can click all my glyphs and the scrollbar appears to scroll up and down when I have more rows than the form's height (macOS, windows, Linux)

 

Now on mobile devices it's another story.

I think it has to do with HitTest that captures the click/tap on the glyph. So when I want to scroll the layout, nothing happens.

If I turn HitTest to false for each glyph, then I can correctly scroll but I can't click the glyph anymore.

The only way to still be able to click and to scroll is scrolling from outside the layout, on the very right edge of the screen, but it's not intuitive.

I think I have tried all HitTest combinations combined with all Touch>InteractiveGesture>Pan=True|False to no avail.

Tried using TImage instead of TGlyph. Same thing

 

Just in case it's useful, I'm placing that TGridLayout in a TFrame.

So I have also moved the OnClick event from the Glyph/TImage to the main GridLayout itself. Same behavior.

 

My guess is that it's either responding to a Click/Tap or a scroll gesture, but can't do both... Still, there are plenty of apps doing this.
The Delphi examples provided don't use a TGridLayout unfortunately.

Except the ScrollableForm example though: it works. But I can't seem to figure out how the hell I can reproduce this. You can click a control and still scroll the form while pressing the control and dragging. It would correctly respond as a click/tap when not scrolling.

 

My config:

TFrame > TVertScrollBox > TGridLayout [> TGlyphs]

 

Did anybody here practice with GridLayout and be able to click any of the grid component AND still be able to scroll the grid on mobile devices?
Thanks for any clue.

Steve

 

 

Edited January 14, 2022 by sjordi

[qubits 20]

Tricky, mobile can be whole bunches of fun.

 

Curious, did you try scrolling it yourself.

Don't use click event, mouse down save x, mouse up check x, if it's more scroll right, if it's less scroll left.

I see the Vert Scroll box has scrollby, so a bit of work, should be able to make it happen.

I would also add or subtract some jitter. If x is dead on (+-jitter), then click.

Have the scroll bar hidden all the time and just flick it.

 

Good luck!

dave

[sjordi 38]

Hi,

Well, this would make it very laggy and difficult to scroll naturally like the platform does natively.
But I'm sure it's just a matter of properties.
I'm going to deeply study the ScrollableForm example tonight as this one works naturally without extra tricks.

[sjordi 38]

Just for those facing the same problem...
If I set the TVertScrollBox on a TForm, it works perfectly. One can both scroll and click on controls.
It seems that the problem is when the ScrollBox is in a TFrame.
I'll tinker a bit with this and let you know if I come up with a solution...

 

-- EDIT - SOLVED --

Yes it's the case.

I now have set my TVertScrollBox into the main TForm.

Then when I dynamically add a Frame, I set it with the VertScrollBox as its parent.
Now everything works fine.  I can click my controls and they respond, and if I click on them and drag up and down with my finger, they do scroll.

 

Technical note: I use Andrea Magni's TFrameStand to do this.
When adding a TFrameStand, you can specify the DefaultParent property as the TVertScrollBox !
Don't hesitate to come back to me for details if you hit your head on a wall too 🙂 

Edited January 22, 2022 by sjordi