Button Clicked Event inside a Collection View Xamarin Forms-CodePudding

I have a collectionView that gets the item source from the backend based on the model

public partial class Post
{
public int Id {get; set;}
public int Upvotes {get; set;}
public string Text {get; set;}
}

The collectionView looks like this:

<CollectionView x:Name="collectionView" Margin="10" SelectionMode="Single" SelectionChanged="collectionView_SelectionChanged">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Frame HasShadow="True" CornerRadius="20" BorderColor="DarkGray">
                                <StackLayout Orientation="Vertical" Padding="0" Spacing="0" >
                                    <StackLayout Orientation="Vertical">
                                        <StackLayout Orientation="Horizontal">
                                            <Label Text="Text:" FontAttributes="Bold" HorizontalOptions="Start" VerticalOptions="Center" FontSize="Body" TextColor="#000000"/>
                                            <Label Text="{Binding Text}" HorizontalOptions="Start" VerticalOptions="Center" FontSize="Body" TextColor="#000000"/>
                                        </StackLayout>
                                       
                                    <Grid BackgroundColor="White" Margin="2">
                                        <StackLayout>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="auto" />
                                                    <ColumnDefinition Width="auto"/>
                                                </Grid.ColumnDefinitions>

                                                <Button Grid.Column="0" x:Name="btnUpvote" Clicked="btnUpvote_Clicked" Text="Upvote" TextColor="Green" CornerRadius="50" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" BackgroundColor="#1110"/>

                                                <StackLayout Grid.Column="1" Orientation="Horizontal">
                                                    <Label Text="Upvotes:" TextColor="Black" FontSize="Body" FontAttributes="Bold" VerticalOptions="Center"/>
                                                    <Label Text="{Binding Upvotes}" HorizontalOptions="Start" VerticalOptions="Center" FontSize="Body" TextColor="#000000"/>
                                                </StackLayout>
                                                
                                            </Grid>
                                        </StackLayout>
                                    </Grid>
                                </StackLayout>
                            </Frame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>

I want to click on the Upvote button so I could call an API to increase the number of upvotes, but I need the Id from the selected collectionView Item. I am not sure how to get the Id (without clicking on the collection view, only clicking the Upvote button) before calling the API that needs the Id.

CodePudding user response：

To complete my remark above. I have a button in my xaml that looks like this:

<Button Text="Delete"
        Command="{Binding Path=BindingContext.Delete, Source={x:Reference SongsCollectionView}}" 
        CommandParameter="{Binding .}"
        Grid.Column="3" Grid.Row="0" StyleClass="Delete"/>

It references the collection it is inside (in your case that would be the 'collectionView').

Now in my case the program was written with MvvmCross. In the init of the SongsCollectionView the following code is present for the Delete.

    public SongsViewModel(IMvxNavigationService navigationService) : base(navigationService)
    {
        Delete = new MvxCommand<Song>(
            execute: (song) =>
            {
                // Code for deleting song is in here.
            });
    }

    public ICommand Delete { get; set; }

Simply replace the MvxCommand by Command and it should work.

CodePudding user response：

in addition to using a Command, you can also do this with a simple event handler by using the BindingContext

void btnUpvote_Clicked(object sender, EventArgs args)
{
  Button btn = (Button)sender;
  var item = (Post)btn.BindingContext;
}