Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to change the listview scrolling behavior to bottom to top?

SreeeeSreeee INMember ✭✭✭✭✭

Hi,

I have a listview in my xamarin forms project which contains the latest item on top. When scroll to bottom I can view the remaining items.

Now I need to show the recent item on the bottom and when scroll up need to show the remaining items? The same like WhatsApp chat window :)

How can I do this? Thanks in advance :)

Best Answer

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited November 2018 Accepted Answer

    HI @ClintStLaurent, @JohnHardman and @Charwaka Got solution for this :)

    To achieve this we are going to rotate the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom but by doing this the scroll bar now will appear at the left side. To fix that we are going to use the property FlowDirection (Released in the version 3.0 of Xamarin Forms).

    So in the ListView we are going to set these two properties:

    FlowDirection="RightToLeft"
    Rotation="180"
    

    And in the view cells main layout:

    FlowDirection="LeftToRight"
    Rotation="180"
    

    Be aware that now that the ListView and ViewCells are rotated so you should consider that the bottom of your ListView is at the top.

    For more read this

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Reverse the data of the collection its binded to.
    Don't try to affect the listview... affect the data its using.

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited November 2018 Accepted Answer

    HI @ClintStLaurent, @JohnHardman and @Charwaka Got solution for this :)

    To achieve this we are going to rotate the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom but by doing this the scroll bar now will appear at the left side. To fix that we are going to use the property FlowDirection (Released in the version 3.0 of Xamarin Forms).

    So in the ListView we are going to set these two properties:

    FlowDirection="RightToLeft"
    Rotation="180"
    

    And in the view cells main layout:

    FlowDirection="LeftToRight"
    Rotation="180"
    

    Be aware that now that the ListView and ViewCells are rotated so you should consider that the bottom of your ListView is at the top.

    For more read this

  • jayuthakerjayuthaker Member
    edited July 2019

    @Sreeee said:
    HI @ClintStLaurent, @JohnHardman and @Charwaka Got solution for this :)

    To achieve this we are going to rotate the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom but by doing this the scroll bar now will appear at the left side. To fix that we are going to use the property FlowDirection (Released in the version 3.0 of Xamarin Forms).

    So in the ListView we are going to set these two properties:

    FlowDirection="RightToLeft"
    Rotation="180"
    And in the view cells main layout:

    FlowDirection="LeftToRight"
    Rotation="180"
    Be aware that now that the ListView and ViewCells are rotated so you should consider that the bottom of your ListView is at the top.

    @Sreeee thank you so much for this solution.. works perfect.. However, we have one major issue with this approach. Do you have any solution to this issue:

    Scrolling issues in Android 9.0 Pie
    www.github.com/rdelrosario/ChatUIXForms/issues/3

    Hope @ClintStLaurent might have solution to this.

    Thanks again.

  • lbk3lbk3 Member ✭✭

    @Sreeee said:
    HI @ClintStLaurent, @JohnHardman and @Charwaka Got solution for this :)

    To achieve this we are going to rotate the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom but by doing this the scroll bar now will appear at the left side. To fix that we are going to use the property FlowDirection (Released in the version 3.0 of Xamarin Forms).

    So in the ListView we are going to set these two properties:

    FlowDirection="RightToLeft"
    Rotation="180"
    And in the view cells main layout:

    FlowDirection="LeftToRight"
    Rotation="180"
    Be aware that now that the ListView and ViewCells are rotated so you should consider that the bottom of your ListView is at the top.

    This seems incredibly 'hacky', @ClintStLaurent answer was spot on to just reverse the collection you're populating your list with

Sign In or Register to comment.