best way to make clickable text?

ChaseFlorellChaseFlorell CAInsider, University mod

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

Best Answers

Answers

  • ChaseFlorellChaseFlorell CAInsider, University mod

    perfect, thank you.

  • IanGeogheganIanGeoghegan USUniversity ✭✭

    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?

  • ChaseFlorellChaseFlorell CAInsider, University mod

    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.

  • Matt.CookMatt.Cook USMember ✭✭

    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!

  • ChaseFlorellChaseFlorell CAInsider, University mod

    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)

  • Matt.CookMatt.Cook USMember ✭✭

    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!

  • ChaseFlorellChaseFlorell CAInsider, University mod

    Try this.

            Label temp = new Label {
                Text = "TEST"
            };
    
            var tgr = new TapGestureRecognizer ();
            tgr.Tapped +=(s,e)=>Debug.WriteLine("HELLO");
            temp.GestureRecognizers.Add(tgr);
    
  • Matt.CookMatt.Cook USMember ✭✭

    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 :/

  • ChaseFlorellChaseFlorell CAInsider, University mod

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

  • Matt.CookMatt.Cook USMember ✭✭

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

  • CraigDunnCraigDunn USXamarin Team Xamurai
    edited July 2014

    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.

  • EricGroverEricGrover USMember ✭✭

    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.

  • KeithRoweKeithRowe USMember

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

  • 15mgm1515mgm15 USMember ✭✭✭✭

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

    Object.GestureRecognizers.Add((new TapGestureRecognizer
                {
                    Command = new Command (async o => {
                        await LongRunningOperation();
                    })
                }));
    
  • 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

  • JohnHardmanJohnHardman GBUniversity mod

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

  • ciani.afonsociani.afonso USUniversity ✭✭

    If any one is interested on the XAML version:

  • ciani.afonsociani.afonso USUniversity ✭✭

    If any one is interested on the XAML version:

  • ciani.afonsociani.afonso USUniversity ✭✭

    If any one is interested on the XAML version:

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

  • danielrabdanielrab AUMember ✭✭

    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; } } }

  • zuckerthobenzuckerthoben USMember ✭✭
    edited August 2016

    @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?

  • lindstromdevlindstromdev SEMember ✭✭
    edited October 2016

    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());
    
  • SreeeeSreeee INMember ✭✭✭✭

    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 */
                    })
                });
    
  • rajeshwaranrajeshwaran Member ✭✭

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

  • LucasSossaiLucasSossai Member ✭✭

    Hi Guys, should this code also work for iOS?

  • ChaseFlorellChaseFlorell CAInsider, University mod
    edited November 2018

    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

    <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>
    
Sign In or Register to comment.