Xamarin Forms, How to favorite Item using ListView

Question

I am making an app I want to add an item in the list view like favorite.I was wondering if some one have an procedure that I can use o see or and example of what I need. Thanks Please help on this im new to Xamarin forms.

Answer 1

In your listview, you can use Xamarin.Forms SwipeView to achieve this function.

The SwipeView is a container control that wraps around an item of content, and provides context menu items that are revealed by a swipe gesture:

You can refer to the follownng code:

  <CollectionView x:Name="collectionView"
                        ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <SwipeView>
                        <SwipeView.LeftItems>
                            <SwipeItems>
                                <SwipeItem Text="Favorite"
                                           IconImageSource="favorite.png"
                                           BackgroundColor="LightGreen"
                                           Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
                                           CommandParameter="{Binding}" />
                                <SwipeItem Text="Delete"
                                           IconImageSource="delete.png"
                                           BackgroundColor="LightPink"
                                           Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                           CommandParameter="{Binding}" />
                            </SwipeItems>
                        </SwipeView.LeftItems>
                        <Grid BackgroundColor="White"
                              Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Image Grid.RowSpan="2" 
                                   Source="{Binding ImageUrl}" 
                                   Aspect="AspectFill"
                                   HeightRequest="60" 
                                   WidthRequest="60" />
                            <Label Grid.Column="1" 
                                   Text="{Binding Name}" 
                                   FontAttributes="Bold" />
                            <Label Grid.Row="1"
                                   Grid.Column="1" 
                                   Text="{Binding Location}"
                                   FontAttributes="Italic" 
                                   VerticalOptions="End" />
                        </Grid>
                    </SwipeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

The key code in MonkeysViewModel.cs is:

public ICommand FavoriteCommand => new Command<Monkey>(FavoriteMonkey);

void FavoriteMonkey(Monkey monkey)
{
        monkey.IsFavorite = !monkey.IsFavorite;
}

Note:

Though it is used in CollectionView, but the usage in listView is similar.

You can get the full sample here: https://github.com/xamarin/xamarin-forms-samples/tree/main/UserInterface/CollectionViewDemos

Please focus on page:

VerticalListSwipeContextItemsPage.xaml .