How to dynamically generate GridLayout to contain Button and data - xamarin.forms

Question

Have no clue as to how to handle this scenario dynamically after(2)
1) the app call the REST Json web service
2) Deserialize the Json response
3) Bind the Data to ListView
below is the working example.
Problem : I need to add a button to each row of record. Example , How to add a button next to Johnny Depp?? Add EventHandler for this button?
This means I need to dynamically generate the XAML? How to bind ?
here to code to handle the Returned Json Result:
-- Model:
public class Phone
{
public string mobile { get; set; }
public string home { get; set; }
public string office { get; set; }
}
public class Contact
{
public string id { get; set; }
public string name { get; set; }
public string email { get; set; }
public string address { get; set; }
public string gender { get; set; }
public Phone phone { get; set; }
}
public class ContactList
{
public List<Contact> contacts { get; set; }
}
---- Call REST
var client = new System.Net.Http.HttpClient();
var response = await client.GetAsync("http://Rest api");
string contactsJson = response.Content.ReadAsStringAsync().Result;
ContactList ObjContactList = new ContactList();
if (contactsJson != "")
{
ObjContactList = JsonConvert.DeserializeObject<ContactList>(contactsJson);
}
listviewConacts.ItemsSource = ObjContactList.contacts;
------XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" />
<ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid HorizontalOptions="FillAndExpand" Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue" FontAttributes="Bold"/>
<Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange" FontAttributes="Bold"/>
<Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray" FontAttributes="Bold"/>
<BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
<ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>
Thanks

Answer 1

You created custom cell already, add button to it with Command and CommandParameter. Inside your viewcell grid add
<Button Text="Toggle" Command="{Binding Source={x:Reference YourPage}, Path=BindingContext.TapCommand}" CommandParameter="{Binding}"/>
Then in your model
public Command TapCommand
{
get
{
return new Command( (obj) =>
{
//obj here will be your data record
});
}
}