Styling TEXT within a control

Hello,

I am looking for a control in Xamarin.form to style Text in a single control, such as the following,

    <TextBlock Foreground="DarkGray" VerticalAlignment="Bottom" Margin="0,0,0,8">
        <Run Text="total length "/>
        <Run Text="10" FontSize="48"/>
        <Run Text="h "/>
        <Run Text=":" FontSize="48"/>
        <Run Text="42" FontSize="48"/>
        <Run Text="m "/>
    </TextBlock>

Where I can style Text in elements. Though I could use multiple controls (e.g. Label) to style them but it looks a little heavy.

Regards,

John

Posts

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    That is just horrible markup.
    Just supply a value as string, then supply a String.Format to format it.
    Then you can apply whatever style you like.

  • John.9257John.9257 USMember

    Thanks. The issue here is not string formatting, which is trivial. What I need is a way to style individual chars differently in a string with Xamarin.forms.

    Say, for string '10h:42m', I like to set 'h' and 'm' FontSize to be regular, while the rest in 48 (see image below).

    Any ideas?

  • SmeSme USMember ✭✭✭
    edited September 2016

    I didn't try this myself so I don't know if it will work, but here is apparently a solution for underlining single words/characters in a label: http://stackoverflow.com/questions/39199975/how-to-underline-single-words-in-a-label-in-xamarin-forms/39200923#39200923

    Maybe it will help point you in the right direction.

    Though for me I would probably just go with using multiple labels, as it is a simple although bloated solution.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Though for me I would probably just go with using multiple labels, as it is a simple although bloated solution.

    Agreed. And you can even see this is the path taken by "the big boys".
    If you have an Android device, which you should for real device development work.
    Go into the developer options and turn on "Show Layout Boundaries"
    Now look at boundaries of enterprise-grade solutions, like the clock/weather display on the default Android home screen.
    You can see that each character is its own element, including the am/pm indicator.

  • John.9257John.9257 USMember

    Th> @Sme said:

    I didn't try this myself so I don't know if it will work, but here is apparently a solution for underlining single words/characters in a label: http://stackoverflow.com/questions/39199975/how-to-underline-single-words-in-a-label-in-xamarin-forms/39200923#39200923

    Maybe it will help point you in the right direction.

    Though for me I would probably just go with using multiple labels, as it is a simple although bloated solution.

    Thanks. I'm not sure how to use Effects to change the styling (such as FontSize), but it's a nice post.

    It's relatively easy to accomplish this in a specific platform, but I like to see something that can be shared among platforms.

  • John.9257John.9257 USMember

    @ClintStLaurent said:

    Though for me I would probably just go with using multiple labels, as it is a simple although bloated solution.

    Agreed. And you can even see this is the path taken by "the big boys".
    If you have an Android device, which you should for real device development work.
    Go into the developer options and turn on "Show Layout Boundaries"
    Now look at boundaries of enterprise-grade solutions, like the clock/weather display on the default Android home screen.
    You can see that each character is its own element, including the am/pm indicator.

    Thanks. The string of clock display is only an example. It could be more complicated.

    Like I mentioned, using multiple controls is a possible solution, but I wonder whether there is a better (not-so-heavy) way to accomplish this.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Put everything in its own webview then supply it formatted HTML?

  • JohnHardmanJohnHardman GBUniversity mod

    @John.9257 - This is what the FormattedText property of the Label view is intended for - one Label containing multiple Spans, each with its own formatting.

  • HunumanHunuman GBMember ✭✭✭✭

    @John.9257

    Please have a look at FormattedString, this should cover your need.

    I think it only works with a label. If you want to use it on a button, the only option I have found is to add a Tap gesture to the label to fake a button.

    Hope this helps,

    Tim

  • HunumanHunuman GBMember ✭✭✭✭

    Sorry @JohnHardman ,

    just saw that you had already answered this one.

    My bad,

    Tim

  • John.9257John.9257 USMember

    @Hunuman said:
    @John.9257

    Please have a look at FormattedString, this should cover your need.

    I think it only works with a label. If you want to use it on a button, the only option I have found is to add a Tap gesture to the label to fake a button.

    Hope this helps,

    Tim

    yeah, It does the trick. Thanks!

  • John.9257John.9257 USMember

    @JohnHardman said:
    @John.9257 - This is what the FormattedText property of the Label view is intended for - one Label containing multiple Spans, each with its own formatting.

    Thanks. Yeah it works good.

  • John.9257John.9257 USMember

    @ClintStLaurent said:
    Put everything in its own webview then supply it formatted HTML?

    Thanks. FormattedText will serve the purpose.

  • JohnHardmanJohnHardman GBUniversity mod
    edited September 2016

    @Hunuman @John.9257 - If you want to do the same with Button behavior, use a Grid to position a Button and a Label in the same position on the page.

    If you want it to look like a Button, overlay the Label, with transparent background and with InputTransparent=true, on top of a Button that has empty Text.

    If you want something that looks like a Label to have Button behavior (including being able to tab to it using the keyboard on Windows), position the Button with Opacity = 0.02 over the top of the Label. (if you are not concerned about keyboard support and accessibility, TapGestureRecognizer is easier).

    It's worth implementing a custom control for this sort of thing, as having a generic ContentButton (i.e. a Button that you can put anything in) is really handy. In the attached screenshot, each cell on the calendar is a ContentButton that contains multiple pieces of information - a Gregorian date in the month, a Hebrew date in the month, and colored rounded boxes with specific meanings. (the colored boxes will have an option to be textured to cope with color blindness).

  • HunumanHunuman GBMember ✭✭✭✭

    @JohnHardman said:
    If you want something that looks like a Label to have Button behaviour (including being able to tab to it using the keyboard on Windows), position the Button with Opacity = 0.02 over the top of the Label. (if you are not concerned about keyboard support and accessibility, TapGestureRecognizer is easier).

    Excellent Tip John, thank you,

    Tim

  • John.9257John.9257 USMember

    @JohnHardman said:
    @Hunuman @John.9257 - If you want to do the same with Button behavior, use a Grid to position a Button and a Label in the same position on the page.

    If you want it to look like a Button, overlay the Label, with transparent background and with InputTransparent=true, on top of a Button that has empty Text.

    If you want something that looks like a Label to have Button behavior (including being able to tab to it using the keyboard on Windows), position the Button with Opacity = 0.02 over the top of the Label. (if you are not concerned about keyboard support and accessibility, TapGestureRecognizer is easier).

    It's worth implementing a custom control for this sort of thing, as having a generic ContentButton (i.e. a Button that you can put anything in) is really handy. In the attached screenshot, each cell on the calendar is a ContentButton that contains multiple pieces of information - a Gregorian date in the month, a Hebrew date in the month, and colored rounded boxes with specific meanings. (the colored boxes will have an option to be textured to cope with color blindness).

    That's pretty handy. Thanks!

Sign In or Register to comment.