CODEWITHSUNDEEP
xamarin.forms
developer9969
developer9969

Reputation: 5236

Xamarin Horizontal Collection View with peakareinset

I am using a collection view to show items in an horizontal list, however it has been noted that if the last item in the list is not visible that it might not be clear that there is another item.

unlike carousel the collection view does not have a peakareainset where you can just see a bit of the item so that the user knows that they need to scroll .

How can I achieve the look where you always see a bit of last item in an horizontal collectionview?

What I have

enter image description here

What I would like to have

a

Also if I put HorizontalScrollBarVisibility="Always" does not work as expected as I don't see the horizontal scrolling till you start moving the items. mmm

   <CollectionView  HorizontalScrollBarVisibility="Always" 
                    ItemsSource="{Binding Monkeys}"
                    ItemsLayout="HorizontalList" 
                    ItemSizingStrategy="MeasureFirstItem" 
                    HorizontalOptions="StartAndExpand">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="35" />
                        <RowDefinition Height="35" />
                    </Grid.RowDefinitions>
                    <Image Grid.RowSpan="2" 
                           Source="{Binding ImageUrl}" 
                           Aspect="AspectFill"
                           HeightRequest="60" 
                           WidthRequest="60" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

thanks

Upvotes: 0

Views: 590

Answers (1)

nevermore
nevermore

Reputation: 15806

In Android, you can create a custom renderer of CollectionView to make the HorizontalScrollBar always visiable:

[assembly: ExportRenderer(typeof(Xamarin.Forms.CollectionView), typeof(MyCollectionViewRenderer))]    
namespace App332.Droid
{
    class MyCollectionViewRenderer : CollectionViewRenderer
    {
        public MyCollectionViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
        {
            base.OnElementChanged(elementChangedEvent);

            this.ScrollbarFadingEnabled = false;
        }
    }
}

Upvotes: 1

Related Questions