Xamarin Horizontal Collection View with peakareinset

Question

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

What I would like to have

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

score 1 · Accepted Answer · answered Jul 30 '20 at 06:11

1

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;
        }
    }
}

answered Jul 30 '20 at 06:11

nevermore

15,432
1
12
30

Thanks for that . can you do the same for iOS? – developer9969 Jul 30 '20 at 09:28
The native iOS does not support this feature too. So you have to implement it by yourself. Have a look at these thread may help: [Xamarin Forms ListView for iOS: Always Show ScrollBar](https://stackoverflow.com/questions/45813371/xamarin-forms-listview-for-ios-always-show-scrollbar) and [Make scrollbar always visible on UIScrollView?](https://stackoverflow.com/questions/13697215/make-scrollbar-always-visible-on-uiscrollview). – nevermore Jul 31 '20 at 02:27
If my answer helps you, please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). – nevermore Jul 31 '20 at 02:28

Xamarin Horizontal Collection View with peakareinset

1 Answers1