StackLayout GestureRecognizers Effects

Question

I wanted to add some effects to the StackLayout GestureRecognizers so the user know they have selected the button but I don't see a way to do it? I have tried to change the BackgroundColor for the StackLayout but that is not working.

Can I change the BackgroundColor or is there a long hold event I can use ?

xaml code

  <StackLayout VerticalOptions="Center"
                                    x:Name="slpatient"
                                    Grid.Row="4"
                                    BackgroundColor="#8cb8e1"
                                    Orientation="Horizontal">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Button_Clicked" />
                            </StackLayout.GestureRecognizers>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10"/>
                                    <ColumnDefinition Width="50"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="user_34.png" 
                                   Grid.Column="1" 
                                   VerticalOptions="Center" />
                                <Label Text="Click me to change the BackgroundColor!"
                                   Grid.Column="2"
                                   TextColor="White"
                                   LineBreakMode="WordWrap"
                                   VerticalOptions="FillAndExpand"
                                   VerticalTextAlignment="Center"/>
                            </Grid>
                        </StackLayout>

cs code

    private void Button_Clicked_Clicked(object sender, System.EventArgs e)
            {
               slpatient.BackgroundColor = Color.Black;
var masterDetailPage = Application.Current.MainPage as MasterDetailPage;
            masterDetailPage.Detail = new NavigationPage((new SearchPage("DrugName")));
            }

What do you mean with "too fast"? It's a bit unclear what you're trying to achieve exactly. At the moment all your Button_Clicked_Clicked does is changing a color, so I would assume there's no "too fast" problem there. — Knoop
@Knoop Sorry the Button_Clicked_Clicked navigation to a new page that is what I mean by too fast or the UI is not updating the BackgroundColor — user5843610
It's hard to say because it depends on a lot of things. For example before the navigation occurs the 'SearchPage' needs to be created. If that takes minutes (extreme unrealistic example) then sure the color changing would matter, other cases...maybe not. This seems like something that would be easy to test by just running the code and seeing what happens — Knoop

Saamer Saamer · Accepted Answer · 2019-06-19T18:50:55

The change color functionality is likely happening on a non-UI thread. So you could potentially enclose it in Device.BeginInvokeOnMainThread so it gets called in the UI thread, as shown:

Device.BeginInvokeOnMainThread(() =>
{
     slpatient.BackgroundColor = Color.Black;
});

To answer your second question, yes you can add a timer too:

private void Button_Clicked_Clicked(object sender, System.EventArgs e)
{
     slpatient.BackgroundColor = Color.Black;
     var masterDetailPage = Application.Current.MainPage as MasterDetailPage;
     Device.StartTimer(TimeSpan.FromSeconds(10), () =>
     {
           masterDetailPage.Detail = new NavigationPage((new SearchPage("DrugName")));
           return false; // True = Repeat again, False = Stop the timer
     });
}

StackLayout GestureRecognizers Effects

2 Answers