Xamarin.Forms detect Custom ContentView click outside event - xamarin

Question

I have a CustomCalendar element created by extending the ContentView and using this custom view inside another ContentPage. I tried to use Unfocused event to detect the outside click. But the problem is it is not triggering the event handler. Could you please suggest me to do the detecting of an element outside click in a better way.
I am using my custom view like this way in the page with an Unfocused EventToCommandBehavior
<views:CustomCalendar x:Name="cal">
<views:Calendar.Behaviors>
<prism:EventToCommandBehavior
EventName="Unfocused"
Command="{Binding UnfocusedCalandar}"/>
</views:Calendar.Behaviors>
</views:Calendar>

Answer 1

Unfocused event is raised whenever the VisualElement loses focus, and it only works for the element which is able to receive focus , unfortunately ContentView can't receive focus , so focused and Unfocused event would never trigger on ContentView .
Elements that can receive focus : Entry , Editor , Picker, and so on ...
As a temporary workaround , you could wrap the ContentView into StackLayout, set tap gesture both on ContentView and parenet layout , its own tap gesture will block parent view's gesture .
<StackLayout BackgroundColor="Red" >
<ContentView HeightRequest="100" WidthRequest="100" BackgroundColor="Blue" >
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="ContentViewTap"/>
</ContentView.GestureRecognizers>
</ContentView>
<CollectionView BackgroundColor="Gray" Focused="CollectionView_Focused" >
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid 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="dog.png"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding }"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding }"
FontAttributes="Italic"
VerticalOptions="End" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="StackLayoutTap" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="StackLayoutTap" />
</StackLayout.GestureRecognizers>
</StackLayout>