How to Add Click event in Stack Layout or Frame

by

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/

Leave a Comment