How to Add Click event in Stack Layout or Frame

Atul Dhanuka picture Atul Dhanuka · Jun 19, 2015 · Viewed 28.4k times · Source

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

<Frame Grid.Column="0" BackgroundColor="#ffffff" Grid.Row="0" HasShadow="true" OutlineColor = "Black">
</Frame>


<StackLayout Grid.Column="0" BackgroundColor="#313FA0" Grid.Row="0">
</StackLayout>

Answer

pnavk picture pnavk · Jun 19, 2015

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/