Formatted Label with Xamarin.Forms

xceedxceed GBMember ✭✭
edited October 2014 in Xamarin.Forms

Can someone please show me how to use Xamarin.Forms.Label.FormattedText correctly?

I'm using Xamarin.Forms to write a Carousel based app, when I try

Label IntroductionTextLabel = new Label(); IntroductionTextLabel.FormattedText = "Test";

I get this error:

"'Xamarin.Forms.Label' does not contain a definition for 'FormattedText' and no extension method 'FormattedText' accepting a first argument of type 'Xamarin.Forms.Label' could be found (are you missing a using directive or an assembly reference?)"

Perhaps it's the version of Xamarin I'm currently using...

The next step would be using this to display some HTML.

Thanks for any help.

Best Answer

Answers

  • xceedxceed GBMember ✭✭

    Hi @CraigDunn‌, thanks for your post. OK, that makes sense but I still can't resolved the FormattedString property or indeed the class or the Span class.

    See screenshot below.

    I'm trying to write this code in my main App.cs file, it's a cross platform Xamarmin.Forms project, only for Android at the moment.

    The only example for CarouselPage I can find is coded within the App.cs class rather than Android's MainActivity.

    Perhaps if I write the code within the MainActivity class I can resolved those classes?

    Thank you.

  • CraigDunnCraigDunn USXamarin Team Xamurai

    What version of Xamarin.Forms are you using? Have you updated to the latest NuGet package?

  • xceedxceed GBMember ✭✭
    edited October 2014

    It's only 1.0.6186 :/ I think this may be the problem.

    I'll update and check again... Sorry! I totally forgot I could update like that with NuGet, I thought I'd need to do something with Xamarin Studio.

    Thanks again

  • xceedxceed GBMember ✭✭

    @CraigDunn‌ Yep that fixed it, thanks!

    So if I wanted to, how could I go about using the Android.Text.Html FromHtml method within my App.cs? Or can this only be done in my MainActivity?

  • xceedxceed GBMember ✭✭

    Or to put it another way, if I wanted to display HTML I know the best solution is to use a WebView, the content I dispay will need to include links, but the problem with that is that I couldn't get the WebView to be completely transparent as I can with a StackLayout. Is there a way to display HTML and format it correctly within a StackLayout that doesn't involve using a WebView?

    I suppose I could try using a WebView now that I've updated Xamarin.Forms.

    Thanks and sorry to continue this!

  • CraigDunnCraigDunn USXamarin Team Xamurai

    A custom renderer might work for you (but you'll need to figure out the iOS and Windows Phone equivalents of that Android functionality).

    Using a WebView would depend on the use-case -- it isn't really interchangeable with a Label if you are thinking of small snippets of formatted text.

    Is there a way to display HTML and format it correctly within a StackLayout that doesn't involve using a WebView?

    No, nothing built in.

  • xceedxceed GBMember ✭✭

    Great, thanks again.

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    @CraigDunn‌: It would be very nice, if you could copy your code example to the documentation, because there is nothing.

    If I saw it correct, than it is not possible to underline a span. Is there any discussion to extend FormattedStrings?

  • CraigDunnCraigDunn USXamarin Team Xamurai

    I already did :)

    There's always discussion on feature improvements (on UserVoice).

  • DirkWeltzDirkWeltz DEMember ✭✭✭

    @CraigDunn: Thank you for your fast answer.

    Ah, I didn't find this. I searched in the documentation.

    Are there any changes to this, when 1.3 is coming (change of font from struct to class)?

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Hehe sorry, I meant I added it to the documentation after your question :)

    Changes for 1.3 will be incorporated into the docs closer to release (when any API changes are finalized).

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @craigdunn, is it possible to have an example of Bindings using FormattedText?

  • PedroNeves.7715PedroNeves.7715 USMember ✭✭

    How can i use formattedstring in xaml?

  • SuatKorkmazSuatKorkmaz USMember ✭✭✭

    @PedroNeves.7715 said:
    How can i use formattedstring in xaml?

    I'd like to know that too. Anyone please?

  • xceedxceed GBMember ✭✭

    @CraigDunn said:
    I already did :)

    There's always discussion on feature improvements (on UserVoice).

    Hate to be rude but there's a couple extra brackets in the code example on that link that shouldn't be there ;) The ones after the font sizes 32 and 12.

    Cheers

  • CraigDunnCraigDunn USXamarin Team Xamurai

    oh thanks @xceed - fixed!

  • BuildCalcBuildCalc USMember ✭✭✭

    FYI, I've just added the ability to the Forms9Patch library to create labels and buttons where you can format the text via HTML. For example:

    new Forms9Patch.Label { HtmlText =  "plain <b><i>Bold+Italic</i></b> plain"}
    
    

    ... would give you a label where the text has been formatted bold italic in the middle of the string.

    Also, as an aside, it allows you to use custom fonts that are embedded resources in your PCL project without any platform specific work. And, you can use these fonts via the HTLM <font> tag or and HTML font-family attribute.

    Here are some screen shots from the demo app:

    HtmlLabelDroid1
    HtmlLabelApple3

  • JesseMockJesseMock USUniversity ✭✭

    @PedroNeves.7715 said:
    Answering my own question,

    <Label
             HorizontalOptions="FillAndExpand"
             Style="{StaticResource InfoLabelStyle}">
              <Label.FormattedText>
                <FormattedString>
                  <Span Text="Telefone:" FontAttributes="Bold"/>
                  <Span Text="&#10;12413122" ForegroundColor="Red" />
                  <Span Text="&#10;(Horário de funcionamento: Dias úteis e sábados das 8h às 22h)"/>
                </FormattedString>
              </Label.FormattedText>
    </Label>
    

    This is good stuff!

  • JesseMockJesseMock USUniversity ✭✭

    @JesseMock said:

    @PedroNeves.7715 said:
    Answering my own question,

    <Label
             HorizontalOptions="FillAndExpand"
             Style="{StaticResource InfoLabelStyle}">
              <Label.FormattedText>
                <FormattedString>
                  <Span Text="Telefone:" FontAttributes="Bold"/>
                  <Span Text="&#10;12413122" ForegroundColor="Red" />
                  <Span Text="&#10;(Horário de funcionamento: Dias úteis e sábados das 8h às 22h)"/>
                </FormattedString>
              </Label.FormattedText>
    </Label>
    

    This is good stuff!

    However, I can't seem to get Data binding to work in FormattedString. :neutral:

  • JesseMockJesseMock USUniversity ✭✭
    edited May 2016

    @MichaelRumpler said:
    @JesseMock

    Yes, Spans are not bindable.
    FormattedText is though. So you can create a converter which gets your string as input and gives a FormattedString back. Then you can use it like this:

    <Label FormattedText="{Binding Text, Converter={StaticResource rtfConverter}}" />
    

    Cool, I got that working, thanks! I also augmented this with a passed in parameter like so:

    FormattedText="{Binding AwesomeText, Converter={StaticResource labelValueFormatConverter}, ConverterParameter='AwesomeText: '}"
    

    Then the converter can use "AwesomeText: " as the prefix for the returned formatted string.

  • mryetimryeti USMember

    I want to add hyperlink inside email body. How can i achieve this using xamarin forms .

  • BoguslawBlonskiBoguslawBlonski PLMember ✭✭✭
    edited October 2016

    We just published some to nu get and open source using custom fonts and sizes corresponding to any text with any defined tag (< b >< / b >)
    sample:
    lorem < b > ipsum < / b>
    lorem ipsum

    https://www.nuget.org/packages/Pgs.CrossPlatform.FormattedText/1.0.8
    https://github.com/PGSSoft/Pgs.CrossPlatform.FormattedText

  • batmacibatmaci DEMember ✭✭✭✭✭
    edited January 2017

    @CraigDunn said:
    It's not intended to render HTML, use it with Spans like this:

    var labelFormatted = new Label ();
    var fs = new FormattedString ();
    fs.Spans.Add (new Span { Text="First ", ForegroundColor = Color.Red, Font = Font.SystemFontOfSize(14) });
    fs.Spans.Add (new Span { Text=" second ", ForegroundColor = Color.Blue, Font = Font.SystemFontOfSize(28) });
    fs.Spans.Add (new Span { Text=" third.", ForegroundColor = Color.Yellow, Font = Font.SystemFontOfSize(14) });
    labelFormatted.FormattedText = fs;

    image

    Is there any performance impact using FormattedText instead of Text ? especially in a ListView?

  • lai0723lai0723 Member ✭✭

    Thanks for the help !!!

Sign In or Register to comment.