Partial text clickable in Xamarin Label

Question

I am looking for a way to make parts of the text of a Label in Xamarin Forms clickable, performing different functions, and ideally have different formatting. I understand that a clickable Label is straightforward and can be done something like this:

Label label = new Label { Text = "Click me" };
label.Click += () => { label.Text = "Clicked"; };

Essentially, I'm looking to mimic behavior in an app that I've done in native Android. My app must work for Android and iOS and ideally UWP. In Android, CharSequence objects can be added to a TextView (the control similar to Label). In Android, I might create a CharSequence object like this:

    Runnable doSomething; //equivalent to C# Action; assuming initialized somewhere
    String myString = "My Clickable String"; //the clickable string
    Spannable span = Spannable.Factory.getInstance().newSpannable(myString); //this is the clickable text to add to TextView
        span.setSpan(new ClickableSpan() {
            @Override
            public void onClick(View v) {
                doSomething.run(); //perform the action
            }

            @Override
            public void updateDrawState(TextPaint ds) {
                ds.setUnderlineText(true); //make underlined
                ds.setColor(Color.rgb(color.r, color.g, color.b)); //change the color
                ds.setFakeBoldText(true); //make it bold
                ds.setTextSize((float) largeFont); //change the text size
            }
        }, 0, a.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); //style and function for the entire string

As you can see, it performs a function and has style attributes. I can then add this to TextView (Spannable implements Spanned which implements CharSequence). I can add multiple CharSequences in addition to non-clickable Strings as I desire.

I'm hoping for a way that I can do this in Xamarin but I haven't found a solution yet. I've considered the possibility of custom renderers though I feel that a cross-platform solution would be preferable, if possible. I'm far less familiar with iOS but it seems that it's possible to add NSMutableAttributedString objects to a UILabel to similar effect. I've also seen the FancyLabel object. I'm not quite sure how I would do this for UWP as I really didn't find much in my research.

Any assistance would be very appreciated!

I would also like to figure this one out. I finally gave up and made the entire label clickable using a TapGestureRecognizer. Would much rather have only the specific word clickable. — hvaughan3
Personally I would create your own custom control, (MyLabel : UILabel), then I would add two public ints, for start of range and end of range. then I would add a gesture recognizer and work out the index of a tap in the string array (label.text) and add in whatever action/event you want it to do. that's a rough idea of the top of my head. — Digitalsa1nt
This is not currently possible with a X.Forms Label. See: forums.xamarin.com/discussion/26882/… . There is a FormattedString property fro a Label, but you can only change the Font, Size, and color of the text, not add links to some of the text. You would need to use a custom renderer to use the platform specific methods of adding a link in the middle of TextView(Android)/UILabel(iOS). Alternately you could perhaps use a WebView with local HTML loaded? — jgoldberger - MSFT

Tom Tom · Accepted Answer · 2018-12-11T09:10:29

Just to provide an updated answer to this using Xamarin Forms 3.4 (and over). You can use the FormattedText property of the Label. There is an in-depth overview on how to use it over in the Xamarin Docs.

Fundamentally, it works like so:

<Label 
    LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span 
                Text="Red Bold, " 
                TextColor="Red" 
                FontAttributes="Bold" />
            <Span 
                Text="default, " 
                Style="{DynamicResource BodyStyle}">                          
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}" />
                </Span.GestureRecognizers>
            </Span>
            <Span 
                Text="italic small." 
                FontAttributes="Italic" 
                FontSize="Small" />
        </FormattedString>
    </Label.FormattedText>
</Label>

In the above, tapping on the text default will execute TapCommand.

Partial text clickable in Xamarin Label

3 Answers