Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

[UWP] How to scroll inversely(opposite direction) in ListView? or How to fix the scroll direction?

Goutham_HasProblemsGoutham_HasProblems Member ✭✭✭
edited September 2020 in Xamarin.Forms

I have a ListView rotated by 180, so that the latest items are always appended to the bottom of the view. But, this causes a problem of scrolling when using the scroll button. If the user scrolls forward(away from user) on the button, then the ListView scrolls up, as opposed to scrolling down(this is expected).

Here's an implementation of forcing a scrollView to scroll horizontally. Is there any similar or different solution to achieve a vertical scroll inversion?

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited September 2020

    Did you try to scroll the scroll-bar instead of the mouse? It'll work fine with the bar. Try to test the project on a physical device to check if it'll work well.

  • @Jarvan , the scroll bar works fine, and this UWP application is for a desktop and not for windows phones. So, the user will try to scroll with the scroll button as well right?

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    To reverse scroll direction by mouse wheel, we need to handle the UIElement.PointerWheelChanged event, then we need to get the MouseWheelDelta property.

    Refer to:
    https://social.msdn.microsoft.com/Forums/en-US/80e3cf5c-e08a-4406-a280-227f13170478/uwp-reverse-scroll-direction-by-mouse-wheel?forum=wpdevelop

  • Thanks for the response @Jarvan , I have already tried this. The only challenge here is to get the list view to offset, for which I haven't been able to find any control ;/

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Try to use the following code to display the ListView, the mouse wheel will work fine.

    <local:CustomListView x:Name="listView" Rotation="180" FlowDirection="LeftToRight" ...>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout FlowDirection ="RightToLeft" Rotation="180">
                        <Frame>
                            <Label Text="{Binding Content}" HorizontalOptions="End"/>
                        </Frame>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </local:CustomListView>
    
  • Goutham_HasProblemsGoutham_HasProblems Member ✭✭✭
    edited September 2020

    This didn't work @Jarvan , for now decided to not rotate the list and insert latest items to the end of the list and calling ScrollTo the last element on ListView property changed.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    To display the lastest item, try to use the ScrollTo command instead.

    public MainChatPage()
    {
        InitializeComponent();
        BindingContext = vm = new MainChatViewModel();
    
    
        vm.Messages.CollectionChanged += (sender, e) =>
        {
            var target = vm.Messages[vm.Messages.Count - 1];
            MessagesListView.ScrollTo(target, ScrollToPosition.End, true);
        };
    }
    

    Check the link:
    https://github.com/jamesmontemagno/app-monkeychat/blob/master/src/MonkeyChat/Views/MainChatPage.xaml.cs

  • Yup. That's what I am doing at the moment. Scrolling to whenever the listView's property changes.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Hi, what's the result? Have you solved that?

  • It is still the hack solution only:
    ScrollTo the last element of the list whenever the ListView property changes.
    So, far it has been scrolling to the last element 80% of the time and 20% it just stops in the middle, even though the passed element is the last one.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Sorry, could you test more details about the issue? I tested a basic demo about the function, it works fine.

  • @Jarvan , let me create a sample project and attach it here.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Waiting for your update.

  • @Jarvan Have attached the sample. I ran it on my Windows 10 desktop, OS Version: 1903, Build: 18362.1082.

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited September 2020

    It seems that you didn't use the ScrollTo command in the click method. And it's unnecessary to rotate the listView when using the 'scrollTo' option.

    private void Button_Clicked(object sender, EventArgs e)
    {
        ListElements.Add(i.ToString());
        i++;
        listView.ScrollTo(ListElements[ListElements.Count-1], ScrollToPosition.End, true);
    }
    
  • ScrollTo was actually my work around. In the sample project I shared, I have the listView rotated to demonstrate that the mouse scroll button, scrolls the listView inversely.

  • @Jarvan ,even @Sreeee is encountering the same inverse scroll issue here: https://forums.xamarin.com/discussion/comment/422004

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    I've checked the link before. There are two ways to scroll to the last message: Use the list scroll to the last message and Rotate the list. Because rotating the list will cause reverse the scrolling issue, try to use the scroll-to method instead.

Sign In or Register to comment.