ListView with SfExpander in ItemTemplate will not Swipe if Expander is collapsed.

[Chris]

I have a SfListView with an ItemTemplate that contains a SfExpander view.  I load the data dynamically.  When I try to swipe the ListViewItem with the Expander collapsed it does not work.  If I expand the Expander, the swipe works fine.  Any ideas?

[Lakshmi Natarajan]

Hi Chris, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “ListView with SfExpander in ItemTemplate will not Swipe if Expander is collapsed” from our side. We would like to inform you that when the child element (Expander) is interactable, then the touch will be handled by the Expander and the SfListView does not get touch notification to perform swipe action. This is the expected behavior in Xamarin.Forms. 

 

Hence, we suggest you set the InputTransparent as True for Expander to pass the touch to its parent (SfListView) to handle the swipe action. In this case, since the Expander does not handle the touch, we need to expand/collapse the Header by using command.  

 

You can also refer to the following document regarding InputTransparent API from the following link, 

https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms#property-value 

 

Please refer to the following code snippets for more reference, 

 

XAML: Add the TapGestureRecognizer for the element loaded in the SfExpander.Header to perform expand/collapse.  

<sflistview:SfListView x:Name="listView" 

                        AutoFitMode="DynamicHeight"  

                        SelectionMode ="None" 

                        IsScrollBarVisible="False" 

                        AllowSwiping="True" 

                        ItemsSource="{Binding ContactsInfo}"> 

    ... 

    <sflistview:SfListView.ItemTemplate> 

        <DataTemplate> 

            <expander:SfExpander DynamicSizeMode="Content,Header" InputTransparent="True" IsExpanded="{Binding IsExpanded, Mode=TwoWay}"> 

                <expander:SfExpander.Header> 

                    <Grid x:Name="grid" RowSpacing="0" Padding="0,4,0,0"> 

                        <Grid.GestureRecognizers> 

                            <TapGestureRecognizer Command="{Binding Path=BindingContext.ExpandCommand, Source={x:Reference listView}}" 

                                                    CommandParameter="{Binding .}"/> 

                        </Grid.GestureRecognizers> 

                        ... 

                    </Grid> 

                </expander:SfExpander.Header> 

                <expander:SfExpander.Content> 

                    ... 

                </expander:SfExpander.Content> 

            </expander:SfExpander> 

        </DataTemplate> 

    </sflistview:SfListView.ItemTemplate> 

</sflistview:SfListView> 

 

ViewModel: Change the IsExpanded value in the expand command execution method. 

public class AccordionViewModel : INotifyPropertyChanged 

{ 

    public Command<object> ExpandCommand { get; set; } 

 

    public AccordionViewModel() 

    { 

        ExpandCommand = new Command<object>(OnExpand); 

    } 

 

    private void OnExpand(object obj) 

    { 

        var item = obj as Contact; 

        item.IsExpanded = !item.IsExpanded; 

    } 

} 

 

We have attached the tested sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/166789/ze/ListViewExpander-458513769 

Video: https://www.syncfusion.com/downloads/support/forum/166789/ze/pixel_3_xl_pie_9_0_-_api_28436185071 

 

Also, you can refer to our documentation regarding ListView with Expander in the following link, 

KB links: 

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

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

 

If you need the Expander to be interactable then you can use Xamarin.Forms SwipeView for Expander to achieve your requirement. Please refer to the following document regarding the same from the following link, 

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

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan