How to Add Click event in Stack Layout or Frame

You can add a TapGestureRecognizer to the StackLayout in XAML like this:

<StackLayout Grid.Column="0" Grid.Row="0" BackgroundColor="#313FA0">    <StackLayout.GestureRecognizers>        <TapGestureRecognizer Tapped="OnTapped"/>    </StackLayout.GestureRecognizers></StackLayout>

Then you can implement the OnTapped method in the code behind:

void OnTapped(object sender, EventArgs e) {    // Do stuff}

Alternatively, if you are using the MVVM pattern and would like to Bind the tap to an ICommand in the ViewModel, that can be achieved like this:

<StackLayout Grid.Column="0" Grid.Row="0" BackgroundColor="#313FA0">    <StackLayout.GestureRecognizers>        <TapGestureRecognizer Command="{Binding TapCommand}"/>    </StackLayout.GestureRecognizers></StackLayout>

In your ViewModel you would have:

private ICommand _tapCommand;pubic ICommand TapCommand => (_tapCommand ?? _tapCommand = new Command(OnTapped));void OnTapped() {    // Do stuff}

There are some really good guides on the Xamarin website:

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/gestures/#Using_Xaml

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/tap/

Well, thanks @pnavk , according to what i saw, allow me also to share this, the Views (Layouts,Frame,Images etc) which do not have the inbuilt OnClick or Click Events have the same way of tackling the click Event.

As follows :

For an Image:

<Image>   <Image.GestureRecognizers>       <TapGestureRecognizer Tapped="onImageCitizenReporterTapped" NumberOfTapsRequired="1" />   </Image.GestureRecognizers></Image>

For a Frame :

<Frame>   <Frame.GestureRecognizers>       <TapGestureRecognizer Tapped="onFrameCitizenReporterTapped" NumberOfTapsRequired="1" />   </Frame.GestureRecognizers></Frame>

For StackLayout :

<StackLayout>   <StackLayout.GestureRecognizers>       <TapGestureRecognizer Tapped="onStackCitizenReporterTapped" NumberOfTapsRequired="1" />   </StackLayout.GestureRecognizers></StackLayout >

Cheers.

Sincere thanks to Xamarin Certified Developer Udara Alvis for this solution which is the best because it achieves both goals: exact image and text positionning and the click event, no tap gesture and no bad content layout when button is very large.

The link to the solution of button with exact text and image positionning

Code sample:

<Grid HorizontalOptions="Fill" IsClippedToBounds="True" VerticalOptions="Center">    <Grid.ColumnDefinitions>        <ColumnDefinition Width="*"/>        <ColumnDefinition Width="Auto"/>        <ColumnDefinition Width="*"/>    </Grid.ColumnDefinitions><!--  Button Control  --><Button Grid.ColumnSpan="3" BackgroundColor="{StaticResource AppMainColor}" Clicked="GoToLoginPage" CornerRadius="20"/><StackLayout InputTransparent="True" Grid.Column="1" Orientation="Horizontal" Spacing="10"><!--  Text Label  --><Label Text="Se déconnecter" FontFamily="Roboto-Regular" FontSize="20" TextColor="White"HorizontalOptions="Start" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" /><!--  Icon Image  --><Image HorizontalOptions="End" Source="log_out.png" VerticalOptions="Center"/></StackLayout></Grid>

ScreenShot of the button