xamarin swipe multi row

[Will Autio]

Hi,

What we would like to do is have a ListView with Names in it. On a swipe, we display address, email and phone number each on their own line.

How can we accomplish that?

Thanks!

[Lakshmi Natarajan]

Hi Will, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Swiping in SfListView” from our side. We would like to inform you that the swipe view is a templated view and the BindingContext will be the Model class. So, you can bind the model data to the RightSwipeTemple/LeftSwipeTemplate as binding to the ItemTemplate. We have prepared a sample based on your requirement and attached  in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1614901098476782 

 

Please find the code snippets to bind the data to the Swipe templates, 

<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemSpacing="2" ItemsSource="{Binding ContactsInfo}" AllowSwiping="True" SwipeOffset="200"> 

    <syncfusion:SfListView.ItemTemplate > 

        <DataTemplate> 

            <Grid x:Name="grid"> 

                <Grid.ColumnDefinitions> 

                    <ColumnDefinition Width="70" /> 

                    <ColumnDefinition Width="*" /> 

                </Grid.ColumnDefinitions> 

                <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> 

                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> 

                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> 

                </Grid> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

    <syncfusion:SfListView.LeftSwipeTemplate> 

        <DataTemplate> 

            <Grid BackgroundColor="Teal"> 

                <Label TextColor="White" FontSize="20" LineBreakMode="NoWrap" Text="{Binding ContactNumber}" HorizontalOptions="Center" VerticalOptions="Center"/> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.LeftSwipeTemplate> 

</syncfusion:SfListView> 

 

 

Screenshot: 

 

 

Please refer to our user guidance document regarding the same, 

UG link: https://help.syncfusion.com/xamarin/listview/swiping#overview 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

  

 

[Will Autio]

Hello Lakshmi Natarajan 

Perfect. Now I understand how the swiping works and can use it in our app.

Thanks!

Will

[Lakshmi Natarajan]

Hi Will, 

 

Thank you for the update. 

 

We are glad that our solution meets your requirement. Please let us know if you need further assistance. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan