Partial text that can be clicked on a Xamarin shortcut

Question

I’m looking for a way to make parts of the text of an Xamarin label interactive with various functions and ideally have different formatting. I understand that a clickable label is simple and can be done something like this:

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

Essentially, I am trying to simulate the behavior in an application that I did in native Android. My application should run on Android and iOS and ideally UWP. On Android, CharSequence objects can be added to a TextView (a control similar to a Label). In Android, I could 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. Then I can add this to the TextView (Spannable implements Spanned, which implements CharSequence). I can add a few CharSequence in addition to the non-clickable rows as I wish.

I hope I can do this in Xamarin, but have not yet found a solution. I considered the possibility of custom rendering tools, although I believe that a cross-platform solution would be preferable, if possible. I'm much less familiar with iOS, but it seems like it's possible to add NSMutableAttributedString objects to UILabel for a similar effect. I also saw the FancyLabel object. I'm not quite sure how I would do this for UWP, as I really have not found much in my research.

Any help would be greatly appreciated!

Answer 1

This answer may be extremely late, but may help others in the future.

What I did and checked is to use a grid with appropriate line breaks, say you want to change the behavior of a word:
In your ViewModel / View:

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> //for first few words <ColumnDefinition Width="Auto"/> //the target word <ColumnDefinition Width="Auto"/> //the rest of the string </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> //one row for one line of text </Grid.RowDefinitions> <Label Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Text="First part of string"/> <Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Text="TARGET-WORD"> <Label.GestureRecognizers> <TapGestureRecognizer Command="{Binding <YOUR_COMMAND>}"/> </Label.GestureRecognizers> </Label> <Label Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Text="rest of the string"/> </Grid> 

Thus, you can isolate certain parts of the grid and change the behavior / aesthetics (data triggers, styles, gestures). Remember that <Span></Span> tags do not support all <Label></Label> features.

It is clear that in XAML you need to know the position of the word, or if the line is dynamic, you can dynamically search for it, and also create your own table in the code.

* Tested on Xamarin.Forms 2.3.4.247

Answer 2

Just to provide an updated answer to this with Xamarin Forms 3.4 (and more). You can use the FormattedText Label property. There is a detailed overview of how to use it in Xamarin Docs .

Essentially, it works like this:

 <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 case, clicking on the text by default will execute TapCommand .

Answer 3

Given an example of an answer to this question that might help someone in the future,

Eg. I need to write "By registering, you agree to the Terms of Service and Privacy Policy" with some formatting:

• Terms of service with different colors and can be used
• Privacy policy with different colors and can be used.

The rest of the line should be simple.

Code in XAML:

 `<Label Text="By signing up, you agree to the " Grid.Row="0"/> <Label Text="Terms of Services" TextColor="DarkOrange" WidthRequest="150" HorizontalOptions="End" Grid.Row="0"> <Label.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_Terms"/> </Label.GestureRecognizers> </Label> <Label Text=" and " HorizontalOptions="End" Grid.Row="0" /> <Label Text="Privacy Policy" TextColor="DarkOrange" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Grid.Row="0"> <Label.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_Policy"/> </Label.GestureRecognizers> </Label> ` 

C # code for callbacks:

 private void TapGestureRecognizer_Tapped_Terms(object sender, EventArgs e) { Navigation.PushAsync(new TermsofServicesPage()); } private void TapGestureRecognizer_Tapped_Policy(object sender, EventArgs e) { Navigation.PushAsync(new PrivacyPolicyPage()); } 

Various line shapes can be made and work great for cross platforms.