Frame not updating when AccordionItem it updated

[Spencer Bosley]

Hello,

I am having an issue with the frame not working when the AccordionItem is updated. I have an accordion filled with sfListViews. There is a frame surrounding each listview to make the corners round. When an item gets deleted out of the listView, the listview height is updated correctly with a converter, but the bottom of the frame seems to disappear. When I hot reload, it fixes the frame.

Things that I have tried/ruled out.

1. It is not the accordionItem underneath it that is affecting it.

2. It is not the layout it is inside that is affecting it.

3. I have tried dynamically setting the height of the frame with a converter. This does not work, it still drops the bottom off.

4. I have tried setting a constant height for the frame. The frame will stay the same height and look correct, but I need the height to dynamically change according to the height of the listview.

I have included pictures of before and after deleting an item in the accordionItems sflistview. The bordercolor is set to blue to more easily see the frame.

Thanks

Attachment: FrameIssue_efe205a1.zip

[Lakshmi Natarajan]

Hi Spencer, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Frame not updating when AccordionItem it updated” from our side. We would like to inform you that you can achieve your requirement by adding Grid as parent with RowDefinition as Auto to resize the SfBorder or Frame. We have prepared a sample to achieve your requirement and you can download from the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/162545-697853847 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1402273458 

 

Load Grid in the Accordion.Content with RowDefinition as Auto to resize based on the collection updates. 

<syncfusion:SfAccordion x:Name="OuterAccordion" ExpandMode="SingleOrNone" DynamicSizeMode="Content" Margin="5" BindableLayout.ItemsSource="{Binding Info}"> 

    <BindableLayout.ItemTemplate> 

        <DataTemplate> 

            <syncfusion:AccordionItem x:Name="AccordionItem"> 

                <syncfusion:AccordionItem.Header> 

                    <Grid HeightRequest="50" RowSpacing="0"> 

                        <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/> 

                    </Grid> 

                </syncfusion:AccordionItem.Header> 

                <syncfusion:AccordionItem.Content> 

                <Grid RowDefinitions="Auto"> 

                    <border:SfBorder BorderColor="Blue" CornerRadius="5" BorderWidth="2"> 

                        <--sflistview--> 

                    </border:SfBorder> 

                   </Grid> 

                </syncfusion:AccordionItem.Content> 

            </syncfusion:AccordionItem> 

        </DataTemplate> 

    </BindableLayout.ItemTemplate> 

</syncfusion:SfAccordion> 

 

Also, you can manually add border for the SfListView by customizing the Margin. Please refer to the following code snippets for more reference, 

KB link: https://www.syncfusion.com/kb/11274/how-to-show-group-and-grouped-items-within-a-frame-xamarin-forms-listview-sflistview 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan