Quick tip – Floating Decimal Text in Xamarin Forms

Recently I was talking with my designer pal Claudio, about the importance of the little details when developing a mobile app, little things such as colors, formatted text can change the user experience.

In this article I’m going to show you a quick tip on how to show the decimal numbers in a better way.

The result will looks like this:

Let’s code

The code is pretty simple, I just created a behavior that will take the actual number and transform it using FormattedString putting the integer part with the actual font size and the decimal part dividing the actual font size by 2.

Add the behavior to your Label

And that’s all!

Happy coding

Check the full source code here.

You may also like

3 Comments

  1. I think a few changes are required in the behavior code, for instance in German the decimal separator is not period but comma. Thus, line 25 should be like this:

    var number = behavior.Text.ToString(CultureInfo.InvariantCulture);