UWP: RadListView - Scroll list with UP - DOWN arrow key

5 posts, 0 answers
  1. Paresh
    Paresh avatar
    6 posts
    Member since:
    Jul 2018

    Posted 07 Mar 2019 Link to this post

    I am using RadListView with Xamarin Forms 3.2.0.

    I want to scroll list view's individual item using up and down arrow key. How can I enable this behavior?

    Thanks

     

  2. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 08 Mar 2019 Link to this post

    Hello Paresh,

    The RadListView does have an API that lets you programmatically scroll to items, however the native platform Keyboard events will be up to you to subscribe to.

    You could use a Custom Renderer or Platform Effect in order to get to the Keyboard events. I think a Xamarin.Forms Effect would be best for this, you could implement some custom events in your Platform Effect and then trigger the Xamarin.Forms.

    If you've never written a Platform Effect before, you can learn by following the tutorial series in the Microsoft Documentation: Xamarin.Forms Introduction to Effects.

    If you've never written code for events or event handlers before, I have written a blog post that shows how to do this. It's not the same as what you're trying to do here, but the concepts are the same and can be applied here.

    Here's the concept's life-cycle:

    1. Subscribe to UWP's keyboard events
    2. when the up key or down key is pressed, invoke your Effect's custom event.
    3. In the event handlers, programmatically scroll the RadListView

    public void MyCustomEventHandler
    {
        MyRadListView.ScrollItemIntoView(itemYouWantToScrollTo);
    }


    We do not have any demos you can use for reference as this is custom development unrelated to the Telerik Controls. If you get stuck, you can post to StackOverflow or Xamarin Forums and request help for "How to Subscribe to UWP Keyboard Event in Platform Effect".

    I hope this information was helpful.

    Regards,
    Lance | Technical Support Engineer, Principal
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Paresh
    Paresh avatar
    6 posts
    Member since:
    Jul 2018

    Posted 08 Mar 2019 in reply to Lance | Manager Technical Support Link to this post

    Thanks for giving direction.

    So,How exactly MyRadListView.ScrollItemIntoView works? Does it scroll to specific item we are passing in? What I am looking for is user scrolls through list using keyboard up and down key, rather than mouse scroll button. 

     

    Thanks

     

     

  4. Paresh
    Paresh avatar
    6 posts
    Member since:
    Jul 2018

    Posted 08 Mar 2019 in reply to Lance | Manager Technical Support Link to this post

    Also in UWP app, if user does not  have mouse and using laptop trackpad there is no way to scroll. Can we show scroll bar explicitly which can be used to scroll in that case. 
  5. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1168 posts

    Posted 08 Mar 2019 Link to this post

    Hi Paresh,

    Let me answer your first question: You pass the actual data item to scroll to, it's not an X/Y offset. We internally calculate that because there is UI virtualization in operation (only a certain number of items are realized at any given time).

    Onto you question about scrolling gesture. If the user is only using trackpad, they would use a two-finger gesture to scroll. 

    That being said, in UWP you can set ScrollViewer properties to always show the scrollbar. This isn't a Telerik API, so you'll need to gain access to the native UWP RadListView and set the ScrollViewer properties.

    To make this easier, you can use the UWP Toolkit's Visual Tree Extensions (search NuGet for Microsoft.Toolkit.Uwp.UI) and find the ScrollViewer child and set the scrollbar mode.

    For example, in the Effect, get a reference to the native RadListView and do the following:

    ScrollViewer sv = myUwpRadListView.FindDescendant<ScrollViewer>();
    sv.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;

    For more information on using the toolkit, you can find the root documentation here.


    Regards,
    Lance | Technical Support Engineer, Principal
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top