ScrollItemIntoView

[Simon]

I am looking to scroll a item to the top of (if there is enough space below the item I am scrolling to) but I can only see scroll into view which doesn't meet my needs. is there any options I have missed?

[Lance | Senior Manager Technical Support]

Hi Simon,

This is the expected behavior and does not currently have an override. The item will appear at the top as long as the item was above the view port when you called ScrollItemIntoView.

Please review the following documentation Xamarin ListView Documentation | Scrolling | Telerik UI for Xamarin. In summary:

• If the item is above the view port, the RadListView will stop scrolling when it appears at the top
  • 
• If the item is beneath the view port, then the RadListView will stop scrolling once the item appears at the bottom of the viewport.
  • 

 

Options

I see three options for you to move forward if you want to change this behavior

• Custom Approach - you build a custom renderer and manually scroll the native list control
  • Pro - Does exactly what you need, very custom. Happens now.
  • Con - you need to do the work, requires some research and understanding of the native controls
• Feature Request - Propose that the UI for Xamarin developers add the feature to the product this is governed by demand, product lifecycle and other priorities
  • Pro - You don't have to do any work
  • Con - Can take a long time, not guaranteed to happen (even if approved)
• Professional Services - Built immediately, just for you, and meets your needs now.
  • Pro - Happens now, very custom, someone else does the work, meets all specifications.
  • Cons - Is not included with UI for Xamarin license, this is a contract

Let me share some details for each option.

Custom Approach

If that method doesn't suit your design needs, you can always write a custom renderer and implement additional functionality on top of it. I do not have any examples of such a custom lower level API usage that does this, but I can point you to tutorials that explain how to make a custom renderer and the native ListView controls that our RadListView is wrapping.

In a nutshell, you could do something like this

1. Write a custom renderer that expose an additional custom method (e.g. "ScrollExtra")
2. Do the math to determine the offset you want to add
3. Invoke the native scroll viewer's methods to translate the offset
4. At runtime, you'd call our ScrollItemIntoView first, then invoke your custom offset method.

Resources

If you've never written a custom renderer before, it can sound very complex. In reality, it is actually pretty simple. It's just a class that lets you access the native platform control's features.

Please read and follow the instructions in these articles/tutorials

1. Xamarin.Forms Custom Renderers - Xamarin | Microsoft Docs
2. Introduction to Custom Renderers - Xamarin | Microsoft Docs
3. Customizing an Entry - Xamarin | Microsoft Docs
4. Customizing a ListView - Xamarin | Microsoft Docs

There are more tutorials, but once you've done the exercise for a the Xamarin.Forms ListView, you can move on to building a renderer for the Telerik RadListView.

Native Controls

Here is the documentation for the native controls. This is where you'll find the infortmaiotn on the native control's features, properties, etc.

• Native UWP ListView
• Native Android RadListView
• Native iOS TKExtendedListView

 

To give you an idea, take a look at this KB that shows how to use a custom Renderer to access the native scroll viewer to dsiable the bounce Disable ListView bounce on iOS Xamarin | Telerik UI for Xamarin. The same concept is used for all platforms and all Xamarin.Forms (not just Telerik stuff)

Feature Request

You can open a Feature Request here Progress® Telerik® UI for Xamarin Feedback Portal 

Professional Services

If this is an absolute must-have, and you have the budget to outsource the work, the Professional Services team can build it custom for you. Contact them here Custom App Development/App Customizations - Outsourcing Services - Progress 

Regards,
Lance | Manager Technical Support
Progress Telerik

[Simon]

Thanks Lance that was an incredibly detailed and informative answer. 

 

I am going down the Custom Renderer route as I have a few of them already.

 

[Lance | Senior Manager Technical Support]

Hello Simon,

I just now thought of a trick that might save you from doing the custom renderer:

Preliminary phase

Determine if the target item is above or below the viewport.

Action Phase

• If the target item is above
  1. Only call ScrollItemIntoView once, on the target item itself.
     
• If it is underneath
  1. Call ScrollItemIntoView for the next item beneath the target item (this will make the target item to go above the viewport!)
  2. Finally call ScrollItemIntoView again on the target item (because it was above, it will appear at the top of the viewport)

Result

The target item will always appear at the top of the view port.

Summary

I'm not sure how you'd accomplish the preliminary phase, because I'm not aware of a method that gives you just the realized items. However, once you have a reliable option for that, the rest falls into place because it is only math (adding +1 to the index). I think this will be easier than multiple renderers, each dealing with native idiosyncrasies.

-Tip -

You might be able to get a handle on the item containers and check the BindingContext of the first container. Remember that RadListView is a UI virtualized control. So it reuses the same set of containers (when one scrolls off the screen, it is emptied and used for the next item coming from the other direction).

You could try subclassing ListViewTemplateCell and keep track of each one manually using the OnBindingContextChanged method override. Just be careful not to cause a memory leak doing this.

Regards,
Lance | Manager Technical Support
Progress Telerik