How To Add Click Event In Stack Layout Or Frame

I am new in xamarin.forms please help me out how i can add click event in Stack Layout or Frame

Solution 1:

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

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

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

voidOnTapped(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:

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

In your ViewModel you would have:

private ICommand _tapCommand;
pubic ICommand TapCommand => (_tapCommand ?? _tapCommand = new Command(OnTapped));

voidOnTapped() 
{
    // 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/

Solution 2:

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><TapGestureRecognizerTapped="onImageCitizenReporterTapped"NumberOfTapsRequired="1" /></Image.GestureRecognizers></Image>

For a Frame :

<Frame><Frame.GestureRecognizers><TapGestureRecognizerTapped="onFrameCitizenReporterTapped"NumberOfTapsRequired="1" /></Frame.GestureRecognizers></Frame>

For StackLayout :

<StackLayout><StackLayout.GestureRecognizers><TapGestureRecognizerTapped="onStackCitizenReporterTapped"NumberOfTapsRequired="1" /></StackLayout.GestureRecognizers>
</StackLayout >

Cheers.

Solution 3:

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:

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

ScreenShot of the button

Share