Forum Xamarin Xamarin.Forms

[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.

Sign In or Register to comment.