StackLayout - handle click event

adriano.bellavita

Hi all,

I've realized a very simple clickable StackLayout: it's composed by 2 images and a label.

I used TapGestureRecognizer to trigger the tapped event, so I can handle the click of the user on the button.

Here is my question: I would like to customize my StackLayout when the user clicks on it.

I would be able to find a cross platform solution to manage, f.e., the background color of the stackLayout from white to red. And also, if possible, to change the font of the label that is inside the StackLayout.

Does Xamarin Forms provide a simple way to do this?

TY in advance.

MichaelRumpler

Use a MR.Gestures.StackLayout and this code:

myLayout.Down += (s, e) => myLayout.BackgroundColor = Color.White;
myLayout.Up += (s, e) => myLayout.BackgroundColor = Color.Red;

The TapGestureRecognizer only raises after your finger was lifted from the screen.

NMackay

@MichaelRumpler said:
Use a MR.Gestures.StackLayout and this code:

myLayout.Down += (s, e) => myLayout.BackgroundColor = Color.White;
myLayout.Up += (s, e) => myLayout.BackgroundColor = Color.Red;

The TapGestureRecognizer only raises after your finger was lifted from the screen.

@adriano.bellavita

Problem solved

NMackay

@adriano.bellavita

If your using XAML just give the StackLayout a name and reference the control in the code behind.

If your using an MVVM approach you can use data triggers and valueconverters to customize your UI based on data changes in the viewmodel.

adriano.bellavita

TY for the quick response.

I think I will use the first approach (I'm using XAML).

So I give a name to the StackLayout ("myLayout") and I handle the click on it by using TapGestureRecognizer (Tapped="handleMyClick").

In the code behind

void handleMyClick(object sender, System.EventArgs e) {
myLayout.BackgroundColor = WHITE
}

but now the BackgroundColor remains white, and this is not what I want.

I would like that the white color remains only for the time of the click event.

NMackay

Without writing some platform specific code I don't think that event is bubbled up to the cross platform control, there's no OnTapEnded event etc.

You'd have to write some customer render code or it's probably less grief to just use MrGestures for this.

http://www.mrgestures.com/

adriano.bellavita

I try to use mrgesture, but I can't find a way to perform what I really need.

I "simply" want that when I press a StackLayout (or whatever) I can dynamically change some attributes of it.

And that when I release my finger, the StackLayout returns in its original state.

It's possible to find a cross platform solution instead of build a customer render?

NMackay

I'd be seriously surprised if you can't achieve this with Mr Gestures, As I Say, I don't know of any controls that expose the with the Forms cross platform API.

@MichaelRumpler
http://www.mrgestures.com/#Documentation

Otherwise you'll have to investigate platform specific code

https://stackoverflow.com/questions/31876852/how-to-create-a-view-with-touchdown-and-touchup-events-in-xamarin-forms-with-scn

MichaelRumpler

Use a MR.Gestures.StackLayout and this code:

myLayout.Down += (s, e) => myLayout.BackgroundColor = Color.White;
myLayout.Up += (s, e) => myLayout.BackgroundColor = Color.Red;

The TapGestureRecognizer only raises after your finger was lifted from the screen.

NMackay

@MichaelRumpler said:
Use a MR.Gestures.StackLayout and this code:

myLayout.Down += (s, e) => myLayout.BackgroundColor = Color.White;
myLayout.Up += (s, e) => myLayout.BackgroundColor = Color.Red;

The TapGestureRecognizer only raises after your finger was lifted from the screen.

@adriano.bellavita

Problem solved

adriano.bellavita

Ty very much, this will help me to solve the problem!

FilipLarsson

@MichaelRumpler I was about to purchase the library since it's a fair price of 10€ "The price for one license is EUR 10,00 (+VAT).". However when I get to the MyCommerce-page, the price is 40€. Is something wrong?

MichaelRumpler

No. You were a few seconds too late. After 2.5 years at €10,- I just raised it to €40,-.

NMackay

Still super cheap at 40 euros

karan78

<StackLayout .GestureRecognizers>
<TapGestureRecognizer Tapped="Button_Clicked"/>
</StackLayout .GestureRecognizers>

mohammadsallal

You Can Add This in Your Stack Layout and Linked it by tapped when clicked,,

</StackLayout .GestureRecognizers>