How to underline a specific part of a label? [duplicate] - xaml

Question

For this example:
var vm.MyText = "ABC";
<Label Grid.Row="1" Text="{Binding MyText}" />
Is there a way that I can add an underscore to the text?

Answer 1

use TextDecorations="Underline" (requires 3.3.0)
<Label>
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="This app is written in C#, XAML, and native APIs using the" />
<Span Text=" " />
<Span Text="Xamarin Platform" FontAttributes="Bold" TextColor="Blue" TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand, Mode=OneWay}"
CommandParameter="https://learn.microsoft.com/en-us/xamarin/xamarin-forms/"/>
</Span.GestureRecognizers>
</Span>
<Span Text="." />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>

Answer 2

You can use a FormattedString to apply different attributes, colors, etc.. to a label:
var formattedString = new FormattedString();
formattedString.Spans.Add(new Span { Text = "Stack, ", FontAttributes = FontAttributes.None });
formattedString.Spans.Add(new Span { Text = "Overflow, ", FontAttributes = FontAttributes.Italic });
label.FormattedText = formattedString;
re: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#formatted-text

Answer 3

Edit: check this answer if you're running a XF version previous to 3.3.0, otherwise followe the accepted answer.
If you need is an underline, you must create an effect
using Xamarin.Forms;
namespace YourProjectNamespace.Effects
{
public class UnderlineTextEffect : RoutingEffect
{
public UnderlineTextEffect()
: base("YourProjectNamespace.UnderlineTextEffect")
{
}
}
}
Android implementation
using System;
using System.ComponentModel;
using Android.Graphics;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ResolutionGroupName("YourProjectNamespace")]
[assembly: ExportEffect(typeof(AndroidUnderlineTextEffect), "UnderlineTextEffect")]
namespace YourProjectNamespace.Android.Effects
{
public class AndroidUnderlineTextEffect : PlatformEffect
{
protected override void OnAttached()
{
((TextView)Control).PaintFlags |= PaintFlags.UnderlineText;
}
protected override void OnDetached()
{
}
protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
{
base.OnElementPropertyChanged(args);
if (args.PropertyName == Label.TextProperty.PropertyName || args.PropertyName == Label.FormattedTextProperty.PropertyName)
((TextView)Control).PaintFlags |= PaintFlags.UnderlineText;
}
}
}
iOS implementation:
using System;
using System.ComponentModel;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ResolutionGroupName("YourProjectNamespace")]
[assembly: ExportEffect(typeof(AppleUnderlineTextEffect), "UnderlineTextEffect")]
namespace YourProjectNamespace.iOS.Effects
{
public class AppleUnderlineTextEffect : PlatformEffect
{
protected override void OnAttached()
{
SetTextUnderline();
}
protected override void OnDetached()
{
}
protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
{
base.OnElementPropertyChanged(args);
if (args.PropertyName == Label.TextProperty.PropertyName || args.PropertyName == Label.FormattedTextProperty.PropertyName)
SetTextUnderline();
}
private void SetTextUnderline()
{
var text = ((UILabel)Control).AttributedText as NSMutableAttributedString;
var range = new NSRange(0, text.Length);
text.AddAttribute(UIStringAttributeKey.UnderlineStyle,
NSNumber.FromInt32((int)NSUnderlineStyle.Single),
range);
}
}
}
And on your XAML add the effect:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:YourProjectNamespace"
x:Class="YourProjectNamespace.UnderlineEffectPage">
<StackLayout>
<Label
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
Text="Underlined Text">
<Label.Effects>
<local:UnderlineTextEffect />
</Label.Effects>
</Label>
</StackLayout>
</ContentPage>