Category / Section
How to add or remove an item from Xamarin.Forms ListView (SfListView)
1 min read
You can add or remove items from ItemsSource with a bound collection from ViewModel in Xamarin.Forms SfListView.
XAML
ViewModel commands bound to view to add or remove item.
<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.Content> <StackLayout> <Grid HeightRequest="50" > <Button Text="Add item" Grid.Column="0" Command="{Binding AddCommand}"/> <Button Text="Delete last item" Grid.Column="1" Command="{Binding DeleteCommand}}"/> </Grid> <syncfusion:SfListView x:Name="listView" ItemSpacing="1" ItemSize="50" ItemsSource="{Binding contactsinfo}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid" RowSpacing="0"> <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" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </StackLayout> </ContentPage.Content> </ContentPage>
C#
Object added to the collection of ViewModel.
public class ContactsViewModel { public Command AddCommand { get; set; } public ContactsViewModel () { AddCommand = new Command(OnAddTapped); } private void OnAddTapped(object obj) { var details = new Contacts() { ContactNumber = random.Next(100, 400).ToString() + "-" + random.Next(500, 800).ToString() + "-" + random.Next(1000, 2000).ToString(), ContactName = CustomerNames[random.Next(1, 50)], ContactImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + random.Next(0, 28) + ".png", typeof(MainPage)), }; contactsinfo.Add(details); } }
C#
Object removed from the collection of ViewModel.
public class ContactsViewModel { public Command DeleteCommand { get; set; } public ContactsViewModel () { DeleteCommand = new Command(OnDeleteTapped); } private void OnDeleteTapped(object obj) { if (contactsinfo.Count > 0) contactsinfo.Remove(contactsinfo[contactsinfo.Count - 1]); else App.Current.MainPage.DisplayAlert("Alert", "There is no item in the list", "OK"); } }