Just starting with SfListView and seems to behave oddly compared to standard ListView

[Brett Butcher]

I want to set up horizontal scrolling in a listview which the standard one doesn't support and I understand that the SF one does... 

I started with my already working ListView and added the SF one in the page copying the basic parameters as below:

Working ListView:

            <ListView x:Name="PrizeView" HeightRequest="300">

                <ListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <StackLayout BackgroundColor="#eee" Orientation="Vertical">

                                <Image>

                                    <Image.Source>

                                        <UriImageSource CacheValidity="5" CachingEnabled="False"

                                                      Uri="{Binding ImageURL}" />

                                    </Image.Source>

                                </Image>                                

                                <Image Source="{Binding ImageURL}" HeightRequest="60" 

                                       CachingEnabled="false" />  Remove this after development                        

                                <StackLayout Orientation="Horizontal">

                                    <Label Text="Prize:" />

                                    <Label Text="{Binding Id}" />

                                    <Label Text="{Binding Name}" />

                                    <Label Text="{Binding Description}" />

                                </StackLayout>

                            </StackLayout>

                        </ViewCell>

                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

Not working SfListView:

            <syncfusion:SfListView x:Name="SfPrizeView" HeightRequest="300">

                <syncfusion:SfListView.ItemTemplate>

                    <DataTemplate>

                        <ViewCell>

                            <StackLayout BackgroundColor="#eee" Orientation="Vertical">

                                <Image>

                                    <Image.Source>

                                        <UriImageSource CacheValidity="5" CachingEnabled="False"

                                                      Uri="{Binding ImageURL}" />

                                    </Image.Source>

                                </Image>

                                <StackLayout Orientation="Horizontal">

                                    <Label Text="Prize:" />

                                    <Label Text="{Binding Id}" />

                                    <Label Text="{Binding Name}" />

                                    <Label Text="{Binding Description}" />

                                </StackLayout>

                            </StackLayout>

                        </ViewCell>

                    </DataTemplate>

                </syncfusion:SfListView.ItemTemplate>

            </syncfusion:SfListView>

All the binding works fine. It is inside a stacklayout and I have set that as required:

        <StackLayout Orientation="Vertical"

                     Padding="10"

                     Spacing="10"

                      VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

I am (for speed) testing the basics with the UWP implementation and havent tried other as yet, but I am getting very different results - I have uploaded the image of a screengrab which shows both on the same page. The SFListview has no scroll region, and is overlaying the images, incorrect background colour etc. Have I missed something.. BTW I have tried changing the HeightRequest to 500 and also deleting it to default it but no effect. 

Any thoughts.?

Rgds Brett

Attachment: screenshot_7c12146a.zip

[Brett Butcher]

BTW.. I tried to edit the post but it didn't work either, so I need to say that the working Listview has a second Image which says "Delete after development" at the end. This was commented out in the working code. Sorry for the confusion..

[Muthu Kumaran Gnanavinayagam]

Hi Brett, 

 

We have checked the reported query “SfListView items does not layout properly” and referred the attached code example from our side. We have found that you have defined HeightRequest instead of ItemSize in your sample which results in the reported behavior. So you can either define the size for each item(if all the items are of same size) by set the specific double value for ItemSize property or you can enable the AutoFitMode (in case of different item sizes) by setting the AutoFitMode property value as ‘Height’. 

 

You can refer the below documentation links to know more about defining ItemSize and AutoFitMode in SfListView. 

 

Defining ItemSize: https://help.syncfusion.com/xamarin/sflistview/viewappearance#defining-the-item-size 

 

Enabling AutoFitMode: https://help.syncfusion.com/xamarin/sflistview/item-size-customization#autofit-the-items-based-on-content 

 

Please let us know if your require further assistance. 

Regards, 

G.Muthu kumaran.