Xamarin Button only registers click on corner - xamarin.forms

Question

I have a Xamarin Forms project and I have a Content Page with a ListView in which I have two buttons to add or remove items from a Cart.
When I click on the remove button it works just fine but when I click on the add button it only works if I click it on the left corner. If I click somewhere else on the button it will register as if I click the entire item on the listView.
Also, I don't know why but the buttons change its size when clicked.
Here is how it is performing
And here is the code. The button that is not working properly is called btnAdd
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppCrijoya.Views.CartPage">
<ContentPage.Content>
<StackLayout Padding="0">
<Grid RowSpacing="0" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Start" BackgroundColor="#ffffff" Padding="0,8" Margin="0,0,0,5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="0">Monto Total:</Label>
<Label x:Name="lblTotalCart" VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="1" TextColor="Black" FontAttributes="Bold"></Label>
<Button VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="2" x:Name="btnContinue" Text="Continuar"
BackgroundColor="#353A47" FontSize="12" HeightRequest="35"
TextColor="White" Clicked="BtnContinue_Clicked" Padding="0" />
</Grid>
<StackLayout x:Name="stkEmpty" IsVisible="False" Margin="0,220,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="bag.png" HeightRequest="40"></Image>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">TU CESTA DE LA COMPRA ESTÁ VACÍA</Label>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row="1">
<ListView x:Name="CartListView" ItemsSource="{Binding oList}" HasUnevenRows="True" IsPullToRefreshEnabled="False" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="3.5" CornerRadius="30">
<Grid x:Name="Item" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="150" RowSpacing="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="155"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Image}" Aspect="Fill" HeightRequest="100" WidthRequest="100" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start">
<Label Text="{Binding Name}" Margin="0" TextColor="Black" FontSize="15"/>
</StackLayout>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<!--<StackLayout Grid.Column="1" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center">
<Label Text="Cantidad" VerticalOptions="Center"/>
</StackLayout>-->
<StackLayout Grid.Column="0" Grid.Row="1" HorizontalOptions="Start">
<Label Text="Precio Unidad"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="End">
<Label Text="{Binding Price, StringFormat='{0:N2}€'}"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" HorizontalOptions="Start">
<Label Text="Precio Total" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" HorizontalOptions="Start">
<Label Text="{Binding Total, StringFormat='{0:N2}€'}" TextColor="Black"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="-"
CommandParameter="{Binding .}"
Clicked="BtnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="+"
CommandParameter="{Binding .}"
Clicked="BtnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Quantity}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
WidthRequest="30"/>
</Grid>
</StackLayout>
<!-- <Button x:Name="btnDelete" Grid.ColumnSpan="2" Grid.Row="3" Text="Retirar de bolsa" CommandParameter="{Binding Id}"
BackgroundColor="#9C2424" FontSize="10" HeightRequest="35"
TextColor="White" Clicked="BtnDelete_Clicked" Padding="0" />-->
</Grid>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Please help because I have no idea of why this is happening. Thanks.
EDIT
If I remove the label in between the two buttons it will work, don't know why

Answer 1

You may get more reliable behavior if you:
Add the missing RowDefinition, so Grid.Row="3" has height 35.
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<!-- ADD BELOW LINE -->
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>```
Remove the unneeded StackLayout. Change:
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
...
</Grid>
</StackLayout>
to:
<Grid Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
...
</Grid>
IF the above are not sufficient, you might need to add a HeightRequest or hardcoded RowDefinition Height somewhere. I realize this is not ideal - Auto heights are preferable, because they adapt as needed - but sometimes Xamarin Forms needs that extra hint.
The first place to try is to give the whole ItemTemplate a HeightRequest:
<ViewCell>
<Frame ... HeightRequest="300" ...
If that works, then you might try instead putting that on one of the nested elements, to allow most of the content to be automatically sized.
ALTERNATIVE (If the first two items aren't enough)
Its possible to collapse any complex ItemTemplate layout to a SINGLE Grid. Then use StackLayout within cells as needed (but NO NESTED Grids). This is done by use of ColumnSpan and RowSpan to describe areas of the overall grid. You can see this visually if you DIAGRAM the entire layout on a piece of paper, drawing vertical and horizontal lines around each section. Extend those lines all the way to edges of the outer grid.
Xamarin Forms should do a better job of figuring out the layout of this single Grid.
The page might also appear faster.

Answer 2

Try to change the order of the Label , like this .
<Button
x:Name="btnRemove"
Grid.Column="0"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnRemove_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="-"
TextColor="#353A47"
WidthRequest="50" />
<Label
x:Name="lblQuantity"
Grid.Column="1"
FontAttributes="Bold"
FontSize="15"
HeightRequest="20"
HorizontalTextAlignment="Center"
Text="{Binding Quantity}"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="30" />
<Button
x:Name="btnAdd"
Grid.Column="2"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnAdd_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="+"
TextColor="#353A47"
WidthRequest="50" />

Answer 3

I did a test based on your code,I found that the middle Label lblQuantity(Label x:Name="lblQuantity") has covered button (Button x:Name="btnAdd" ), so you can just remove property WidthRequest="30" of the middle label (lblQuantity), just as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="-"
Clicked="btnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="+"
Clicked="btnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Name}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
/>
</Grid>