How to create click event on label in xamarin forms dynamically

Question

I am working on cross platform xamarin application and I want to create hyperlink label for "Forgot password?" on login page. I have used following code to create label but I don't know how to create onclick event on it.

 MainPage = new ContentPage
            {
                BackgroundImage = "background.png",
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    HorizontalOptions = LayoutOptions.CenterAndExpand,
                    Spacing = 50,
                    Children = {

                        new Label {
                            HorizontalTextAlignment = TextAlignment.Center,
                            Text = "Welcome, Please Sign in!",
                            FontSize=50,
                            TextColor=Color.Gray,
                        },


                         new Entry
                        {
                             Placeholder="Username",
                            VerticalOptions = LayoutOptions.Center,
                            Keyboard = Keyboard.Text,
                            HorizontalOptions = LayoutOptions.Center,
                             WidthRequest = 350,
                             HeightRequest = 50,
                             FontSize=20,
                             TextColor=Color.Gray,
                             PlaceholderColor=Color.Gray,
                        },

                          new Entry
                        {
                             Placeholder="Password",
                            VerticalOptions = LayoutOptions.Center,

                            Keyboard = Keyboard.Text,
                            HorizontalOptions = LayoutOptions.Center,
                             WidthRequest = 350,
                             HeightRequest = 50,
                             FontSize=25,
                             TextColor=Color.Gray,
                             IsPassword=true,
                              PlaceholderColor =Color.Gray,
                        },
                        new Button
                        {
                            Text="Login",
                            FontSize=Device.GetNamedSize(NamedSize.Large,typeof(Button)),
                            HorizontalOptions=LayoutOptions.Center,
                            VerticalOptions=LayoutOptions.Fill,
                            WidthRequest=350,
                            TextColor=Color.Silver,
                            BackgroundColor=Color.Red,
                            BorderColor=Color.Red,
                        },
                       new Label //for this label I want to create click event to open new page
                        {
                            Text="Forgot Password?",
                            FontSize=20,
                            TextColor=Color.Blue,
                            HorizontalOptions=LayoutOptions.Center,

                        },
                    } 
        }
            };

user_1554208 · Answer

For people who prefer to use XAML and who like to bind Command directly to the ViewModel, you can use this:

And then in your ViewModel, you'll just assign the command to your function:

public ICommand ForgotPasswordCommand => new Command(OnForgotPassword);

And then define the function with all the work get done:

private async void OnForgotPassword()
{ ... }

PS: You will need to declare that you are using System.Windows.Input;

user_440696 · Answer

If the're several places with clickable Label, it makes sense to create a control inheriting from Xamarin.Forms Label and DO NOT PUT TapGestureRecognizer everywhere the label is required.

public class ExtendedLabel : Label
{
    private event EventHandler click;

    public string Name
    {
        get; set;
    }

    public void DoClick()
    {
        click?.Invoke(this, null);
    }

    public event EventHandler Clicked
    {
        add
        {
            lock (this)
            {
                click += value;

                var g = new TapGestureRecognizer();

                g.Tapped += (s, e) => click?.Invoke(s, e);

                GestureRecognizers.Add(g);
            }
        }
        remove
        {
            lock (this)
            {
                click -= value;

                GestureRecognizers.Clear();
            }
        }
    }
}

In your XAML file you import the namespace where the control is defined, e.g.



And use it as ordinary control:

How to create click event on label in xamarin forms dynamically

4 Answers