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.

Xamarin Forms - Recognize Scroll Position

I want to make a comment entry that is only visible if the user is at the bottom of the article. So the app has to recognize when the user has scrolled enough, then a method should make the entry field visible.

I can't find something like this on the Internet, so maybe you guys can help me.

First Screenshot: This one is without the entry field and when the user scrolls down

Second Screenshot: The entry field becomes visible

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    You can register the ScrollView's Scrolled event, compare the ScrollY to the whole scrollView's content size. When we find it has come to the bottom show the entry:

    private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        ScrollView scrollView = sender as ScrollView;
        Console.WriteLine("Current Scroll ==========" + e.ScrollY);
        Console.WriteLine(scrollView.ContentSize.Height);
    
        // After testing I found the bottom's offset is about 600 less than the scroll view's content size's height,
        // you can adjust this as you want
        if (scrollView.ContentSize.Height - e.ScrollY < 610)
        {
            MyEntry.IsVisible = true;
        }
        else
        {
            MyEntry.IsVisible = false;
        }
    }
    

    Xaml could be like this:

    <ContentPage.Content>
        <ScrollView Scrolled="ScrollView_Scrolled">
            <Grid>
                <!--... Large content-->
                <Entry VerticalOptions="End" Placeholder="Enter" x:Name="MyEntry" IsVisible="False"/>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
    
  • GaetanFGaetanF USMember ✭✭✭

    Why not using a ListView, putting your article in the header and the comments as the content? You could even lazy loading the comments or refresh to load new ones...

Sign In or Register to comment.