CODEWITHSUNDEEP
xamarinxamarin.formsscroll
Francisco Peters
Francisco Peters

Reputation: 697

Add indicators to horizontal scroll in Xamarin

I have the following Horizontal scroll

<ScrollView HorizontalOptions="FillAndExpand" Padding="0" Orientation="Horizontal" HorizontalScrollBarVisibility="Never">
    <ContentView Content="{Binding DocumentTypeContent}"/>
</ScrollView>

But I want that when there's more content to the right there would be an arrow pointing to the right displaying, and when there's more content to the left I'll have the same thing pointing to the left, so for example, the right arrow should always be displaying unless the user scrolled all the way to the right, and the opposite with the left arrow. How can I detect when the scrolls is all the way to the left or all the way to the right to display an image?

Upvotes: 0

Views: 704

Answers (2)

Tuğ&#231;e Arar
Tuğ&#231;e Arar

Reputation: 806

You can detect if scroll touch to end or start like this:

 <ScrollView HorizontalOptions="FillAndExpand" Padding="0" Orientation="Horizontal" HorizontalScrollBarVisibility="Never" Scrolled="ScrollView_Scrolled">

And your code: 

 private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
 {
        double scroll = (sender as ScrollView).ContentSize.Width - (sender as ScrollView).Width;
        if (scroll <= e.ScrollX)
        {
            right_button.IsEnabled = false;
        }
        else
        {
            right_button.IsEnabled = true;
        }

        if (e.ScrollX == 0)
        {
            left_button.IsEnabled = false;
        }
        else
        {
            left_button.IsEnabled = true;
        }

}

Upvotes: 2

Guilherme Nimer
Guilherme Nimer

Reputation: 555

You can try to use converter in this situation

   <ContentPage
   ...
   xmlns:Helpers="clr-namespace:YOURNAMESPACE">

<ScrollView HorizontalOptions="FillAndExpand" Padding="0" Orientation="Horizontal" HorizontalScrollBarVisibility="{Binding NUMBEROFITENS,Converter={Helpers:IsBarVisible}}">
    <ContentView Content="{Binding DocumentTypeContent}"/>
</ScrollView>

IsBarVisible.cs

public class IsBarVisible : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {

        return (int)value > 3 ? "Always" : "Never";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

Upvotes: 1

Related Questions