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.

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

Goutham_HasProblemsGoutham_HasProblems Member ✭✭✭
edited September 10 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

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 10

    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?

  • JarvanJarvan 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 ;/

  • JarvanJarvan 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 11

    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.

  • JarvanJarvan 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.

  • JarvanJarvan 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.

  • JarvanJarvan 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.

  • JarvanJarvan 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.

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited September 21

    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

  • JarvanJarvan 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.