locked
best way to make clickable text? RRS feed

  • Question

  • User28549 posted

    Is there a way to either make a Label Clickable or make a Button appear as though it's a regular label?

    Thursday, June 12, 2014 3:48 PM

Answers

  • User45170 posted

    You can add a TapGestureRecognizer to virtually any VisualElement, including Label, Image, etc.

    Label label = new Label() {
        Text = "Clickable"
    };
    label.GestureRecognizers.Add(new TapGestureRecognizer((view) => OnLabelClicked()));
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, June 12, 2014 4:23 PM
  • User1004 posted

    the Action is indeed obsolete, and might be removed later on. We now expose a Command and an event. Use the one you prefer.

    using the event: var tgr = new TapGestureRecognizer (); tgr.Tapped +=(s,e)=>OnLabelClicked(); label.GestureRecognizers.Add(tgr);

    using the command: label.GestureRecognizers.Add (new TapGestureRecognizer { Command = new Command (()=> OnLabelClicked()), });

    This change was required to have a consistent API and allow using TGR from Xaml

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, June 18, 2014 8:24 AM

All replies

  • User45170 posted

    You can add a TapGestureRecognizer to virtually any VisualElement, including Label, Image, etc.

    Label label = new Label() {
        Text = "Clickable"
    };
    label.GestureRecognizers.Add(new TapGestureRecognizer((view) => OnLabelClicked()));
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, June 12, 2014 4:23 PM
  • User28549 posted

    perfect, thank you.

    Thursday, June 12, 2014 4:33 PM
  • User43424 posted

    XS now throws warning that such a technique is now obsolete and to use a command instead. Anyone have a handle on how to do this properly?

    Wednesday, June 18, 2014 1:59 AM
  • User28549 posted

    Even though it's obsolete, I'm still using it. I'm personally not sure if I want to use Commands for navigation... though I suppose we could.

    Wednesday, June 18, 2014 2:11 AM
  • User1004 posted

    the Action is indeed obsolete, and might be removed later on. We now expose a Command and an event. Use the one you prefer.

    using the event: var tgr = new TapGestureRecognizer (); tgr.Tapped +=(s,e)=>OnLabelClicked(); label.GestureRecognizers.Add(tgr);

    using the command: label.GestureRecognizers.Add (new TapGestureRecognizer { Command = new Command (()=> OnLabelClicked()), });

    This change was required to have a consistent API and allow using TGR from Xaml

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, June 18, 2014 8:24 AM
  • User58005 posted

    Does anyone know of any code samples that use commands? I am a bit confused by the purpose and would like to see how it is typically used. Thanks!

    Thursday, June 19, 2014 6:22 PM
  • User28549 posted

    Sorry @Matt.Cook, I don't understand the question entirely. The examples are above.

    Any View in Xamarin Forms has the ability to have a Gesture Recognizer attached to it. From there, you can tap the element and invoke a method.

    Look at the marked answer for an example. You can either trigger a method by attaching a tap gesture, or invoking a command object.

    I use tap gestures for navigation, and command objects for commands (go get something from the database, submit something to the database, etc)

    Thursday, June 19, 2014 6:25 PM
  • User58005 posted

    I guess I am just looking for a "real-life" example of it, as I am having some trouble with using one. Currently, I have something like this in my code:

                Label temp = new Label {
                    Text = "TEST"
                };
    
                temp.GestureRecognizers.Add (new TapGestureRecognizer {
                    Command = new Command (()=> Debug.WriteLine("HELLO")),
                });
    

    But when I run the application, it just crashes out with: Method not found: 'Xamarin.Forms.TapGestureRecognizer.set_Command'.

    I have the code in OnAppearing, should I have it somewhere else instead or is it something else I am doing wrong?

    Thanks!

    Thursday, June 19, 2014 6:58 PM
  • User28549 posted

    Try this.

            Label temp = new Label {
                Text = "TEST"
            };
    
            var tgr = new TapGestureRecognizer ();
            tgr.Tapped +=(s,e)=>Debug.WriteLine("HELLO");
            temp.GestureRecognizers.Add(tgr);
    
    Thursday, June 19, 2014 7:09 PM
  • User58005 posted

    I actually tried that earlier, and got error at the same point but with:

    Method not found: 'Xamarin.Forms.TapGestureRecognizer.add_Tapped'.

    I also tried just putting it straight in the constructor and setting the contents of the page to be only that label but with no luck :/

    Thursday, June 19, 2014 7:15 PM
  • User28549 posted

    strange. sorry can't help. have to wait for someone from Xamarin to chime in.

    Thursday, June 19, 2014 7:17 PM
  • User58005 posted

    Still haven't had any luck, is there anybody else having this issue and possibly have a solution?

    Thursday, July 17, 2014 6:14 PM
  • User14 posted

    There is a Command example in the Working with Gestures doc.

    See the ViewModel code for the Command implementation and the Xaml for the binding.

    Thursday, July 17, 2014 6:31 PM
  • User28327 posted

    I also found it helpful to add an underline for clickable text to make it appear as a hyperlink. Xamarin Forms Labs has the implementation of this in their ExtendedLabel.

    Friday, July 18, 2014 1:13 PM
  • User53292 posted

    @Matt.Cook - I had the same issue, it went away when I updated the Xamarin.Forms package to 1.2.2

    Thursday, July 31, 2014 1:06 PM
  • User57571 posted

    If any one is interested is adding async operations to a command:

    Object.GestureRecognizers.Add((new TapGestureRecognizer
                {
                    Command = new Command (async o => {
                        await LongRunningOperation();
                    })
                }));
    
    Tuesday, February 24, 2015 6:42 PM
  • User208572 posted

    Hello everyone.

    I am new in Xamarin Forms and may have an easy question, but I couldn't find the solution so far:

    I have a Label with a lot of text. For some of the words within this text, I need to implement a link to a special glossary page to explain the word. Is there a way to just allow TapGestureRecognize for a certain part of the Label?

    If I add one of these special words to a separate label and add the TapGestureRecognizer, the system creates a new line for this word (the link to the glossary page works fine)

    Any solutions?

    Thank you in advance

    Monday, April 11, 2016 5:01 PM
  • User127236 posted

    If any one is interested on the xaml version:

          <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding MyCommand}" NumberOfTapsRequired="1" />
          </Label.GestureRecognizers>
    
    Wednesday, June 22, 2016 11:35 AM
  • User89714 posted

    Remember that TapGestureRecognizer does not help people using physical keyboards or accessibility software. Button semantics, such as accepting the focus, are required.

    Wednesday, June 22, 2016 11:39 AM
  • User127236 posted

    If any one is interested on the XAML version:

    Thursday, June 23, 2016 5:22 PM
  • User127236 posted

    If any one is interested on the XAML version:

    Thursday, June 23, 2016 5:22 PM
  • User127236 posted

    If any one is interested on the XAML version:

    Thursday, June 23, 2016 5:22 PM
  • User228129 posted

    the XAML version of label, not run, you know that

    Thursday, June 30, 2016 2:13 PM
  • User240848 posted

    Here is an example of a code version using bindings with mvvm and is typesafe.

    In your view //setup label var lbl = new Label { Text = "Tap me!" }; //setup the tap gesture var tgr = new TapGestureRecognizer(); //bind it to your view model tgr.SetBinding<ViewModel>(TapGestureRecognizer.CommandProperty, ViewModel => ViewModel.Tap); //attach the tap gesture to the label lbl.GestureRecognizers.Add(tgr); All you need to do here is change 'ViewModel' to whatever your model is named.

    In your ViewModel public Command Tap { get { return new Command(() => { System.Diagnostics.Debug.WriteLine("I've been tapped!"); //do something here; } } }

    Wednesday, July 13, 2016 10:39 PM
  • User246651 posted

    @danielrab I tried your code with an image.

    I want to display clickable/tappable images of employees. If you tap on one of these images you should get on a detail page of the tapped employee. This is how I implemented your snippet:

    ...omitted

    var image = new CachedImage { // omitted }

    var employeeViewModel = new EmployeeViewModel { EmployeeImage = image };

    var tapGestureRecognizer = new TapGestureRecognizer(); tapGestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, EmployeeViewModel => EmployeeViewModel.Tap); employeeViewModel.EmployeeImage.GestureRecognizers.Add(tapGestureRecognizer); employeeViewModelList.Add(employeeViewModel);

    ...omitted


    The ViewModel class: class EmployeeViewModel { public CachedImage EmployeeImage { get; set; }

        public Command Tap => new Command(() =>
        {
            Debug.WriteLine("I've been tapped!");
            throw new System.Exception(); // to make sure that the binding works, debug
        });
    

    }

    I see the image, but the Tap Command does not fire. Whats wrong with this implementation?

    Friday, August 19, 2016 2:45 PM
  • User190835 posted

    Try this:

    <Label x:Name="ExampleLabel" Text="{Binding clickLabel}">
    <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding MyCommand}" NumberOfTapsRequired="1" </Label.GestureRecognizers>
    
    
    
    clickLabel = "Click Me";
    MyCommand = new Command(() => LoadSomething());
    
    Thursday, October 27, 2016 12:57 PM
  • User351573 posted

    Simply use the below code in xaml.cs class, no need of viewmodel.

    label_xname.GestureRecognizers.Add(
                new TapGestureRecognizer()
                {
                    Command = new Command(() => {
                        /* Handle the click here */
                    })
                });
    
    Friday, January 19, 2018 9:46 AM
  • User369196 posted

    void Lblclickfucn() { Lblclick.GestureRecognizers.Add(new TapGestureRecognizer() { Command = new Command(() => { DisplayAlert("Task", "youclicked on me", "ok"); } ) });

    Sunday, June 17, 2018 12:19 PM
  • User379603 posted

    Hi Guys, should this code also work for iOS?

    Wednesday, November 14, 2018 4:35 PM
  • User28549 posted

    Whoah, resurrecting an old thread. This works on all platforms, however there's a way better way now that Forms 3.2 is release. You've now got the ability to have bindable / clickable spans

    xml <Label> <Label.FormattedText> <FormattedString> <Span Text="Some Paragraph " /> <Span Text="Click Me!" TextColor="Blue" TextDecorations="Underline"> <Span.GestureRecognizers> <TapGestureRecognizer Command="{Binding ClickCommand}" /> </Span.GestureRecognizers> </Span> <Span Text=" Rest of the paragraph" /> </FormattedString> </Label.FormattedText> </Label>

    Wednesday, November 14, 2018 4:38 PM