Synchronized & Nested Scrolling

Question

Synchronized & Nested Scrolling

Nathan Sokalski 4,111

My app includes 4 CollectionView(s), one of which contains a CollectionView in it's ItemTemplate. Here is a screenshot from the XAML Previewer:

The 4 Collection Views are the following:

The first row ("First", "Second", "Player Three", "Fourth", etc.)
The left column (blue with numbers)
The center area (light colored columns with numbers, the ItemTemplate is a CollectionView)
The third row (colored with numbers)

I need the following scroll scenarios to be synchronized. I need horizontal synchronization for 1, 3, and 4. I need vertical synchronization for 2 and the CollectionView(s) in the ItemTemplate of 3. Some of the things causing me problems with doing this are:

CollectionView only has a ScrollTo method that accepts the index of an item. This could cause problems synchronizing the vertical scrolling because not all CollectionView(s) will always have the same number of items, most likely causing IndexOutOfRangeException. It would also prevent smooth synchronization.
Because the CollectionView(s) in the ItemTemplate of 3 do not have an ID like the other CollectionView(s), I am not sure how to access them to apply whatever actions are necessary to perform the synchronization.

Most stuff that I have found about CollectionView seem to give the implication that it is intended to be a standalone element that has very little layout and elements outside of itself, although I have found that to rarely be the case for me (and maybe for others as well). What can I do to synchronize my CollectionView(s)? Thanks.

JessieZhang-MSFT 7,721 Reputation points Microsoft External Staff

2020-12-07T08:50:22.43+00:00

Hi @Nathan Sokalski , I'm not quite follow you. Whst do you mean by words The center area (light colored columns with numbers, the ItemTemplate is a CollectionView)?

Do you mean it is a collectionView? And what's the structure of the following UI?

If it is convenient for you, could you please post some code snippets or a simple demo to github which could help us to understand your problem?
Nathan Sokalski 4,111 Reputation points

2020-12-07T16:28:06.793+00:00

I probably should have cropped off the bottom of my screenshot, the 0 1 2 3 4 5 6 7 8 9 & round buttons are not a CollectionView, they are not involved in my issue. You are correct that the center area is a CollectionView (with horizontal scrolling), and the ItemTemplate for that CollectionView is a CollectionView (with vertical scrolling). Each individual CollectionView displays & scrolls fine, but I need them to scroll in sync.
JessieZhang-MSFT 7,721 Reputation points Microsoft External Staff

2020-12-08T09:29:21.547+00:00

When you scroll one CollectionView , you can try to send message to make other CollectionViews scroll at the same time.
Nathan Sokalski 4,111 Reputation points

2020-12-08T23:26:39.77+00:00

My problem is not whether I can make them scroll, it is about where I can make them scroll to. As I mentioned, the ScrollTo method only allows you to specify an item index, not an exact index. Therefore, using ScrollTo (I'm assuming in the Scrolled event) would cause the scrolling to be sort of jumpy, since the user is not likely to scroll to an exact index. Also, I need the synchronization to occur before the user finishes scrolling, and (if I am correct) the Scrolled event does not occur until the user finishes scrolling. I need to control the offsets to exact positions, and I need to control them while the user is scrolling, not afterwards. Any ideas? Thanks.

1 answer

Your answer

JessieZhang-MSFT 7,721 Reputation points Microsoft External Staff

2020-12-07T08:50:22.43+00:00

Hi @Nathan Sokalski , I'm not quite follow you. Whst do you mean by words The center area (light colored columns with numbers, the ItemTemplate is a CollectionView)?

Do you mean it is a collectionView? And what's the structure of the following UI?

If it is convenient for you, could you please post some code snippets or a simple demo to github which could help us to understand your problem?
Nathan Sokalski 4,111 Reputation points

2020-12-07T16:28:06.793+00:00

I probably should have cropped off the bottom of my screenshot, the 0 1 2 3 4 5 6 7 8 9 & round buttons are not a CollectionView, they are not involved in my issue. You are correct that the center area is a CollectionView (with horizontal scrolling), and the ItemTemplate for that CollectionView is a CollectionView (with vertical scrolling). Each individual CollectionView displays & scrolls fine, but I need them to scroll in sync.
JessieZhang-MSFT 7,721 Reputation points Microsoft External Staff

2020-12-08T09:29:21.547+00:00

When you scroll one CollectionView , you can try to send message to make other CollectionViews scroll at the same time.
Nathan Sokalski 4,111 Reputation points

2020-12-08T23:26:39.77+00:00

My problem is not whether I can make them scroll, it is about where I can make them scroll to. As I mentioned, the ScrollTo method only allows you to specify an item index, not an exact index. Therefore, using ScrollTo (I'm assuming in the Scrolled event) would cause the scrolling to be sort of jumpy, since the user is not likely to scroll to an exact index. Also, I need the synchronization to occur before the user finishes scrolling, and (if I am correct) the Scrolled event does not occur until the user finishes scrolling. I need to control the offsets to exact positions, and I need to control them while the user is scrolling, not afterwards. Any ideas? Thanks.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

Acordding to your problem, I created a new issue in github here: https://github.com/xamarin/Xamarin.Forms/issues/13108

You can follow up this issue and wait Xamarin development team to track this issue.

Hope it can help you.

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Synchronized & Nested Scrolling

1 answer

Your answer