Setting listview height as accordion item when each item in listview is different height.

[Spencer]

Hello,

I am trying to figure out how I can set the height of an sfListView in an accordionItem when each listview item's size is different. I use a heightconverter for when all of the items in the listview are the same height, but I am unsure how to achieve this functionality for when all of the items in the listview are different heights (due to word wrapping). Thank you.

[Lakshmi Natarajan]

Hi Spencer,

 

Thank you for using Syncfusion projects.

 

We have checked the reported query “Setting listview height as accordion item when each item in listview is different height” from our side. We are currently preparing sample with AutoFitMode enabled for SfListView. We will complete the sample and update you further details on February 18, 2021. We appreciate your patience until then.

 

Regards,

Lakshmi Natarajan

[Lakshmi Natarajan]

Hi Spencer, 

 

Thank you for your patience. 

 

You can achieve your requirement by using the SfListView.AutoFitMode as Height to update the item height based on the content. Also, you need to set the HeightRequest for the SfListView based on the items height in the TotalExtent property. Please refer to the following code snippets, 

 

Extend the SfListView and raise the VisualContainer.ProeprtyChagned event. In the event, set the HeightRequest for the ListView. 

public class ExtendedListView : SfListView 

{ 

    VisualContainer container; 

 

    public ExtendedListView() 

    { 

        container = this.GetVisualContainer(); 

        container.PropertyChanged += Container_PropertyChanged; 

    } 

 

    private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) 

    { 

        Device.BeginInvokeOnMainThread(async () => 

        { 

            await Task.Delay(100); 

            var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container); 

            if (e.PropertyName == "Height") 

                this.HeightRequest = extent; 

        }); 

    } 

} 

 

Load the ExtendedListView in the AccordionItem.Content. 

<syncfusion:SfAccordion x:Name="OuterAccordion"  

                        DynamicSizeMode="Content"  

                        ExpandMode="SingleOrNone" 

                        Margin="5" 

                        BindableLayout.ItemsSource="{Binding Info}"> 

    <BindableLayout.ItemTemplate> 

        <DataTemplate> 

            <syncfusion:AccordionItem x:Name="AccordionItem" IsExpanded="{Binding IsExpanded, Mode=TwoWay}"> 

                <syncfusion:AccordionItem.Header> 

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

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

                    </Grid> 

                </syncfusion:AccordionItem.Header> 

                <syncfusion:AccordionItem.Content> 

                    <local:ExtendedListView x:Name="listView" 

                                            AutoFitMode="Height" 

                                            ItemsSource="{Binding Varieties}"  

                                            ItemSpacing="1"> 

                            <local:ExtendedListView.ItemTemplate> 

                                <DataTemplate> 

                                <Grid RowSpacing="0" BackgroundColor="#f6f6f6"> 

                                        <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="Start" Padding="2"/> 

                                        <Label Grid.Column="1" Text="{Binding Price}" VerticalOptions="Center" HorizontalOptions="Start" Padding="2"/> 

                                    </Grid> 

                                </DataTemplate> 

                            </local:ExtendedListView.ItemTemplate> 

                        </local:ExtendedListView> 

                </syncfusion:AccordionItem.Content> 

            </syncfusion:AccordionItem> 

        </DataTemplate> 

    </BindableLayout.ItemTemplate> 

</syncfusion:SfAccordion> 

 

We have attached the sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/162610-34521753 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan