Behaviour OnAttachedTo event not firing - xaml

Question

I have a behaviour set up with the following code (This is just a snippet):
public class StarBehaviour : Behavior<View>
{
TapGestureRecognizer tapRecognizer;
protected override void OnAttachedTo(View view)
{
tapRecognizer = new TapGestureRecognizer();
tapRecognizer.Tapped += OnTapRecognizerTapped;
view.GestureRecognizers.Add(tapRecognizer);
}
protected override void OnDetachingFrom(View view)
{
view.GestureRecognizers.Remove(tapRecognizer);
tapRecognizer.Tapped -= OnTapRecognizerTapped;
}
void OnTapRecognizerTapped(object sender, EventArgs args)
{
//HACK: PropertyChange does not fire, if the value is not changed :-(
IsStarred = false;
IsStarred = true;
}
I have created a horizontal stack layout which stores each StarBehaviour inside it's own grid. The problem is when I test this on my device, the tap isn't recognized. I have a feeling it might have to do with the view but when I put background colours on my views, it seems to be relatively alright. Here is the xaml where the StarBehaviour is implemented:
<?xml version="1.0" encoding="utf-8" ?> <TabbedPage BackgroundColor="#8BC739" x:Name="MainTabbedPage" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SalApp;"
x:Class="SalApp.pages.RecipePage">
<!--Pages can be added as references or inline-->
<ContentPage x:Name="AboutContentPage" Title="About" BackgroundColor="LightGray">
<ScrollView>
<StackLayout Orientation="Vertical" x:Name="AboutStack">
<BoxView x:Name ="imageBoxView" Color="DarkOrange" HorizontalOptions="FillAndExpand" BindingContext="{x:Reference imageBoxView}"
HeightRequest="{Binding Width}" />
<Grid x:Name="textAndRatingGrid" Margin="16,4,0,0" HeightRequest="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label BindingContext="{x:Reference MainTabbedPage}" Text="{Binding Title}" Grid.Column="0"/>
<StackLayout Margin="32,0,4,0" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Fill">
<Grid BackgroundColor="DarkBlue">
<Grid.Behaviors>
<local:StarBehaviour x:Name="starOne" GroupName="myStar"/>
</Grid.Behaviors>
<Image Aspect="AspectFill" x:Name="starBlankOne" Source="stars/star_empty.png"/>
<Image Aspect="AspectFill" x:Name="starSelectedOne" Source="stars/star_full.png" IsVisible="{Binding Source={x:Reference starOne}, Path=IsStarred}"/>
</Grid>
<Grid>
<Grid.Behaviors>
<local:StarBehaviour x:Name="starTwo" GroupName="myStar"/>
</Grid.Behaviors>
<Image x:Name="starBlankTwo" Source="stars/star_empty.png"/>
<Image x:Name="starSelectedTwo" Source="stars/star_full.png" IsVisible="{Binding Source={x:Reference starTwo}, Path=IsStarred}"/>
</Grid>
<Grid>
<Grid.Behaviors>
<local:StarBehaviour x:Name="starThree" GroupName="myStar"/>
</Grid.Behaviors>
<Image x:Name="starBlankThree" Source="stars/star_empty.png"/>
<Image x:Name="starSelectedThree" Source="stars/star_full.png" IsVisible="{Binding Source={x:Reference starThree}, Path=IsStarred}"/>
</Grid>
<Grid>
<Grid.Behaviors>
<local:StarBehaviour x:Name="starFour" GroupName="myStar"/>
</Grid.Behaviors>
<Image x:Name="starBlankFour" Source="stars/star_empty.png"/>
<Image x:Name="starSelectedFour" Source="stars/star_full.png" IsVisible="{Binding Source={x:Reference starFour}, Path=IsStarred}"/>
</Grid>
<Grid>
<Grid.Behaviors>
<local:StarBehaviour x:Name="starFive" GroupName="myStar"/>
</Grid.Behaviors>
<Image x:Name="starBlankFive" Source="stars/star_empty.png"/>
<Image x:Name="starSelectedFive" Source="stars/star_full.png" IsVisible="{Binding Source={x:Reference starFive}, Path=IsStarred}"/>
</Grid>
</StackLayout>
</Grid>
<StackLayout Margin ="16,4" Orientation="Vertical">
<Label FontAttributes="Bold" Text="Description"/>
<Label HorizontalOptions="Fill" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non felis vitae ligula pretium congue. Integer mollis, mauris id pretium vulputate, lacus nibh pulvinar eros, euismod eleifend elit felis non ipsum. Morbi at metus quis quam pellentesque tempus ac pellentesque orci. Quisque rhoncus vulputate fringilla. Suspendisse erat arcu, pulvinar ut tincidunt non, euismod in elit. In rhoncus nibh massa, vel blandit dolor sollicitudin id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sollicitudin rhoncus quam quis sagittis. Fusce pharetra pretium finibus. Aliquam iaculis eget nisi laoreet vehicula. Donec odio ligula, iaculis id mollis nec, ultricies eu magna. Suspendisse molestie, erat ac gravida vulputate, neque elit ultricies leo, ut tristique mauris est eget dolor."/>
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage>
<ContentPage Title="Recipe" BackgroundColor="LightGray"/>
<ContentPage Title="Ingredients" BackgroundColor="LightGray"/>
</TabbedPage>
Any ideas where this could all be going wrong?
UPDATE: I have an idea that it has to do with the binding on the xaml. It might be that the way I set up the binding means that it's not binding to an actual view. It would appear possible due to me building the content page within a tabbed page. Although I am a beginner at bindings in Xamarin so I can't pick this apart myself.

Answer 1

According to your snippet you have shared. You are trying to listen the tap action for each Grid inside the StackLayout. The placement part of Grid inside the StackLayout has nothing wrong. The only thing is you have put Image inside the Grid. So there is a view which is placed above the Grid. The first priority for the touch will go for Image View. Try to set InputTransparent property of the ImageView to true. So that touch can be passed to the Grid, TapGesture callback will get fired.