Skip to content

This repository contains sample about how to conditionally handle the swiping in Xamarin.Forms ListView (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/conditional-swiping-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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

You can also refer the following article. https://www.syncfusion.com/kb/11669/how-to-conditionally-handle-the-swiping-in-xamarin-forms-listview-sflistview

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

ConditionalSwiping

About

This repository contains sample about how to conditionally handle the swiping in Xamarin.Forms ListView (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages