Articles in this section
Category / Section

How to conditionally handle the swiping in Xamarin.Forms ListView (SfListView)

3 mins read

You can enable or disable ListViewItem swiping conditionally in Xamarin.Forms SfListView using the binding context property.

XAML

Defined SfListView with LeftSwipeTemplate, RightSwipeTemplate and set the AllowSwiping Property to True

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>
 
    <ContentPage.Content>
        <StackLayout>
            <syncfusion:SfListView x:Name="listView" ItemSpacing="1" AllowSwiping="True" AutoFitMode="Height" SelectionMode="None" ItemsSource="{Binding contactsinfo}">
                <syncfusion:SfListView.ItemTemplate >
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Grid x:Name="grid" BackgroundColor="{Binding BackgroundColor}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid RowSpacing="0">
                                        <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" VerticalOptions="Center">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Label Text="{Binding ContactName}"/>
                                            <Label Grid.Row="1" Grid.Column="0" Text="{Binding ContactNumber}"/>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
                <syncfusion:SfListView.LeftSwipeTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="Black">
                            <Label Text="Left Swipe" TextColor="White" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.LeftSwipeTemplate>
                <syncfusion:SfListView.RightSwipeTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="Black">
                            <Label Text="Right Swipe" TextColor="White" FontAttributes="Bold" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.RightSwipeTemplate>
            </syncfusion:SfListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

C#

Defining BackgroundColor property in Model

namespace ListViewXamarin
{
    public class Contacts : INotifyPropertyChanged
    {
        …
        private Color backgroundColor;
 
        public Color BackgroundColor
        {
            get { return backgroundColor; }
            set
            {
                backgroundColor = value;
                this.RaisedOnPropertyChanged("BackgroundColor");
            }
        }
 
        public Contacts()
        {
 
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public void RaisedOnPropertyChanged(string _PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
            }
        }
    }
}

C#

Populating BackgroundColor property in the ViewModel

namespace ListViewXamarin
{
    public class ContactsViewModel
    {
        public ObservableCollection<Contacts> contactsinfo { get; set; }
 
        public ContactsViewModel()
        {
            contactsinfo = new ObservableCollection<Contacts>();
            GenerateInfo();
        }
 
        public void GenerateInfo()
        {
            …
            for (int i = 0; i < CustomerNames.Count(); i++)
            {
                …
                if(i%2 == 0)
                {
                    contact.BackgroundColor = Color.LightGreen;
                }
                else
                {
                    contact.BackgroundColor = Color.LightGray;
                }
                contactsinfo.Add(contact);
            }
        }
    }
}

C#

Based on the BackgroundColor property the swipe is disabled

namespace ListViewXamarin
{
    public class Behavior : Behavior<ContentPage>
    {
        SfListView sfListView;
        protected override void OnAttachedTo(ContentPage bindable)
        {
            sfListView = bindable.FindByName<SfListView>("listView");
            sfListView.SwipeStarted += SfListView_SwipeStarted;
            base.OnAttachedTo(bindable);
        }
 
        private void SfListView_SwipeStarted(object sender, Syncfusion.ListView.XForms.SwipeStartedEventArgs e)
        {
            if((e.ItemData as Contacts).BackgroundColor == Color.LightGray)
            {
                e.Cancel = true;
            }
        }
 
        protected override void OnDetachingFrom(ContentPage bindable)
        {
            sfListView.SwipeStarted -= SfListView_SwipeStarted;
            sfListView = null;
            base.OnDetachingFrom(bindable);
        }
    }
}

Output

Swipe Items based on a property

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied