Geek Answers Handbook

How to create a click event on a shortcut in xamarin forms dynamically

I am working on a xamarin cross-platform application and I want to create a hyperlink for "Forgot your password?". on the login page. I used the following code to create a label, but I do not know how to create an 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, }, } } };
+17
source share
4 answers

Try the following:

  var forgetPasswordLabel = new Label // Your Forget Password Label { Text = "Forgot Password?", FontSize = 20, TextColor = Color.Blue, HorizontalOptions = LayoutOptions.Center, }; // Your label tap event var forgetPassword_tap = new TapGestureRecognizer(); forgetPassword_tap.Tapped += (s,e) => { // // Do your work here. // }; forgetPasswordLabel.GestureRecognizers.Add(forgetPassword_tap);

Example:

  var forgetPasswordLabel = new Label // Your Forget Password Label { Text = "Forgot Password?", FontSize = 20, TextColor = Color.Blue, HorizontalOptions = LayoutOptions.Center, }; 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, }, forgetPasswordLabel } } }; var forgetPassword_tap = new TapGestureRecognizer(); forgetPassword_tap.Tapped += (s,e) => { // // Do your work here. // }; forgetPasswordLabel.GestureRecognizers.Add(forgetPassword_tap);
+22
source

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

 <Label HorizontalOptions="Center" TextColor="Blue" FontSize="20" Text="Forgot Password?"> <Label.GestureRecognizers> <TapGestureRecognizer Command="{Binding ForgotPasswordCommand}" /> </Label.GestureRecognizers> </Label>
+18
source 
 MyClickyLabel.GestureRecognizers.Add( new TapGestureRecognizer() { Command = new Command(() => { /* Handle the click here */ } ) } );
+3
source

If in several places there is a clickable label, it makes sense to create a control inherited from the Xamarin.Forms label and DO NOT Tap TapGestureRecognizer wherever 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 in which the control is defined, for example

 <ContentPage xmlns:ctrl="clr-namespace:UICore.Controls" ...

And use it as a regular control:

 <ctrl:ExtendedLabel x:Name="quitButton" Clicked="OnQuit">
+2
source

More articles:


All Articles