How to make a Label display a FormattedString with letters of different color?

Question

I am using a FormattedString to Display a customized text on a Label on Xamarin.Forms. What I am trying to achieve is to change the color of one or more of the elements, for example: $$$$. But even though I am changing the color the Label just displays all the dollar symbols with the same color: $$$$

This is the Label on the view:

<Label Text="{Binding AveragePrice, StringFormat='{0}'}" HorizontalTextAlignment="Center" />

And this is the code of the property bound to the label text on the ViewModel

public FormattedString AveragePrice
{
    get
    {
        return new FormattedString
        {
            Spans =
            {
                new Span { Text = "$", ForegroundColor=Color.Black },
                new Span { Text = "$", ForegroundColor=Color.Black },
                new Span { Text = "$", ForegroundColor=Color.Gray },
                new Span { Text = "$", ForegroundColor=Color.Gray }
            }
        };
    }
}

Why this code doesn't change the color of the dollar symbols? How can I make it happen?

Bind AveragePrice to the FormattedText property, and remove the StringFormat. — Bill Reiss, Feb 05 '17 at 21:10
Great! it worked. Thanks @BillReiss. You should post the answer, to mark the question as answered — Esteban Verbel, Feb 05 '17 at 21:27
ts working in a simple Label.But the same code not working if I load that Label inside a DataTemplate. Any advice? — Divakar, Feb 07 '17 at 13:42
@EstebanVerbel Yes. I have used DataTemplate inside a ListView — Divakar, Feb 08 '17 at 22:41
@Divakar the problem is that you can't reference a Property from the ViewModel directly from within ListView because of it's items source property (the collection you bind to the ListView). You solve this by referencing the "root" of the ViewModel. For this case you can do this: FormattedText="{Binding Source={x:Reference Name=theListViewName}, Path=BindingContext.AveragePrice}" — Esteban Verbel, Feb 09 '17 at 14:10
@Divakar refer to this question for more info: http://stackoverflow.com/a/41689072/6198927 — Esteban Verbel, Feb 09 '17 at 14:11

score 14 · Accepted Answer · answered Feb 06 '17 at 04:05

14

Bind AveragePrice to the FormattedText property, and remove the StringFormat.

<Label FormattedText="{Binding AveragePrice}" HorizontalTextAlignment="Center" />

answered Feb 06 '17 at 04:05

Bill Reiss

3,460
1
19
20

score 9 · Answer 2 · answered Apr 23 '21 at 18:57

For some reason, I couln't apply the solutions presented here.

However, if you want to solve this with XAML, this worked for me:

<Label>  
    <Label.FormattedText>  
        <FormattedString>  
            <Span Text="Red color Bold" ForegroundColor="Red" FontAttributes="Bold"/>  
            <Span Text="$" TextColor="Black"/>  
            <Span Text="$" TextColor="Black"/>  
            <Span Text="$" TextColor="Grey"/>  
            <Span Text="$" TextColor="Grey"/>  
        </FormattedString>  
    </Label.FormattedText>  
</Label>

Taken from this source: https://www.c-sharpcorner.com/article/xamarin-forms-text-app/

How to make a Label display a FormattedString with letters of different color?

2 Answers2

Linked