On iOS: SfListView that contains SfAccordions as elements does not show items if SfListView.AutoFitMode = DynamicHeight

[Thomas Carney]

I've been trying to figure out what is happening and I think it might be a bug. Only on iOS, when I try to populate a SfListView with SfAccordions, and SfListView.AutoFitMode = DynamicHeight, the ListItems do not populate. I made sure to check during debug. The item count returns 0 even if the ItemSource contains objects in the binding.

If I set the SfListVIew.AutoFitMode = None or Height then the items show, but since they're not dynamic the heights don't change when the Accordions expand. Any help would be appreciated.

<sfLv:SfListView x:Name="accordionCollectionView"

                                 VerticalOptions="FillAndExpand"

                                 AutoFitMode="DynamicHeight"

                                 SelectionMode="None"

                                 ItemsSource="{Binding CurrentOnSiteHours}">

                    <sfLv:SfListView.ItemTemplate>

                        <DataTemplate>

                            <StackLayout VerticalOptions="FillAndExpand">

   <syncfusion:SfAccordion x:Name="onSiteHourAccordion"

                                                        DynamicSizeMode="Content"

                                                        ExpandMode="SingleOrNone"

                                                        VerticalOptions="FillAndExpand">

                                    <syncfusion:AccordionItem IsExpanded="False">

                                        <syncfusion:AccordionItem.Header>

    <Grid BackgroundColor="{DynamicResource GridSecondaryBackground}">

                                                <Label HeightRequest="50"

                                                       Text="{Binding UserOnJob.UserName, Mode=TwoWay}"

                                                       TextColor="{DynamicResource MainTextColor}"

                                                       VerticalTextAlignment="Center" />

                                            </Grid>

                                        </syncfusion:AccordionItem.Header>

                                        <syncfusion:AccordionItem.Content>

all of my content code

</syncfusion:AccordionItem.Content/>

[Thomas Carney]

I should also say that my reason of not using a BindableLayout to display multiple Accordions is because I need the list to dynamically add and remove items from the list. An SfAccordion as a BindableLayout also has some issues on iOS. I can only add items to the view, but when items are taken away from the ItemSource the UI doesn't change. So then the items just end up concatenating to the end without removing old ones.

[Lakshmi Natarajan]

Hi Thomas, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “On iOS: SfListView that contains SfAccordions as elements does not show items if SfListView.AutoFitMode = DynamicHeight” from our side. We would like to inform that you can overcome the reported scenario by loading the SfAccordion inside the Grid. 

 

Please refer to the following code snippets for more reference, 

<sflistview:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemsSource="{Binding ContactsInfo}" VerticalOptions="FillAndExpand"> 

    <sflistview:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Grid> 

                <acc:SfAccordion x:Name="expander" HeaderIconPosition="None" DynamicSizeMode="Content" ExpandMode="SingleOrNone"> 

                    <acc:AccordionItem IsExpanded="{Binding IsExpanded, Mode=TwoWay}"> 

                        <acc:AccordionItem.Header> 

                            ... 

                        </acc:AccordionItem.Header> 

                        <acc:AccordionItem.Content> 

                            ... 

                        </acc:AccordionItem.Content> 

                    </acc:AccordionItem> 

                </acc:SfAccordion> 

            </Grid> 

        </DataTemplate> 

    </sflistview:SfListView.ItemTemplate> 

</sflistview:SfListView> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168081/ze/ExpanderXamarin1791966889 

 

 

Also, the SfAccordion is a templated control and loading the scrollable control inside another scrollable control is not recommended in Xamarin.Forms. Please refer to the following document regarding the same, 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview  

https://forums.xamarin.com/discussion/106311/can-you-have-a-scrollview-in-a-scrollview  

 

So, we suggest you to use the SfExpander in the SfListView.ItemTemplate to achieve your requirement. Please refer to the following documentation to achieve your requirement, 

KB link: https://www.syncfusion.com/kb/12159/how-to-bring-the-entire-item-to-view-when-the-expander-sfexpander-is-expanding-in-xamarin 

 

#Regarding I need the list to dynamically add and remove items from the list 

 

We would like to inform you that the SfAccordion allows you to remove the AccordionItem at run time. Please refer to the following documentation for the same, 

KB link: https://www.syncfusion.com/kb/11383/how-to-show-or-hide-accordionitem-in-xamarin-forms-sfaccordion  

 

Also, you can achieve the same by loading the SfExpander inside the SfListView. Please refer to the following documentation using SfListView and SfExpander, 

KB link: https://www.syncfusion.com/kb/12134/how-to-remove-expander-sfexpander-from-itemtemplate-of-xamarin-forms-sflistview 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan