Custom RecyclerView for Forms

Question

I'm having an issue when displaying a large number of visual elements in a scroll viewer, and I've tried every possible way to achieve the same approach, either with 3rd party horizontal list views (Can't find one with variable column/element width) or with rotated native list view (gives weird results).

The only approach that gives the result is via stacklayout docked in scrollviewer where I populate that stacklayout from code. Now the problem is all elements are rendered even if they were not displayed, so it makes the application either very slow.

I thought about having a recyclerview (which exists in native android) but I can't find an approach for it forms as it only exists in android. Now can anyone help me with that? Maybe a custom view where it uses recycler view on android and any similar approach or maybe a regular scrollviewer on iOS ?

Thanks in advance.

Update #1

I could do the rotated listview option using this code -Inspired by this answer-

<RelativeLayout>
    <ListView ItemsSource="{Binding Entries}" Rotation="-90" HasUnevenRows="True"
              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-37}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=37}"
              RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
              RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <BoxView Rotation="90" BackgroundColor="Beige" WidthRequest="200"/>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</RelativeLayout>

But I can never make this box view fill the while cell, there is always empty space -The box view is a place holder instead of other custom control-.

Is there a method to make the box view always fill the whole cell height and fill and expand it to it's WidthRequest property -Which will be dynamic according to a binding later- ?

Form's CollectionView uses RecyclerView on Android, if a CollectionView does not meet your Forms UI requirements, you can review the source to implement your own control : github.com/xamarin/Xamarin.Forms/… — SushiHangover
– SushiHangover, Commented Oct 13, 2020 at 20:10
The CollectionView doesn't offer a direct content like the scroll viewer, and also if used as list doesn't offer a horizontal one with dynamic item width... — Mohamed Ashraf
– Mohamed Ashraf, Commented Oct 13, 2020 at 22:47
Not sure if I understand the 1st part of your reply. For the second part, you can create a custom Android ViewHolder for the RecyclerView your dynamic item's width (this is how I would do it on Android native). This is how the various variants of CollectionView are done in Forms: github.com/xamarin/Xamarin.Forms/… — SushiHangover
– SushiHangover, Commented Oct 13, 2020 at 23:37
The first part I meant to use the collection view as a scroll view, nesting it with a very wide stacklayout and it renders only the visible objects in this stacklayout. Also, I'm looking for a solution for both Android and iOS, so I can't really do something for only one... — Mohamed Ashraf
– Mohamed Ashraf, Commented Oct 14, 2020 at 11:55

Mohamed Ashraf · Accepted Answer · 2020-11-23 18:42:55Z

0

I have found a workaround for such an issue by using a listview with custom template, where I inside of it I used several scrollviews and linked their movement together. Refer to my answer here: How to make multiple list views scroll together?

answered Nov 23, 2020 at 18:42

Mohamed Ashraf

3013 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom RecyclerView for Forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related