Xamarin Forms provides a great foundation for building cross-platform native mobile applications. It eliminates a lot of mundane platform-specific work that would otherwise need to be done multiple times (and in different ways), and it lets me focus on the actual business value that my mobile application is intended to provide. The reality of most mobile applications is that a fair amount of their functionality tends to be expressed in simple navigation and layout patterns and UI elements that are (usually) supported right out of the box by Xamarin Forms. And one of the most basic of UI elements is the humble Label.

Text in Xamarin Forms

The Xamarin Forms Label control represents a formatted string of text, roughly analogous to a <div> element in HTML or a TextBlock in WPF/Silverlight. Labels can display either a simple string of uniform text (via the Text) property, or a more complex series of Span elements that each have their own formatting. In either case, you can control the Font, Size, Attributes, Style, and Color of each segment of text, as well as the linebreak style used for overflow scenarios. The way Xamarin Forms works is that the runtime translates the Label control into a corresponding native UI widget – UILabel for iOS, TextView for Android, and TextBlock on Windows Phone. (you can learn more about the rendering system from Jeff Prosise’s recent series of articles on the subject: http://www.wintellect.com/devcenter/jprosise/supercharging-xamarin-forms-with-custom-renderers-part-1)

 

Build your next mobile application
with Wintellect and Xamarin!

 

Pre-defined Text Styles

While Color selection is straightforward, and Font is usually best left to the platform’s defaults, I often find myself looking up the options for Size, Attributes and Style. And while the online documentation certainly covers each option (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/fonts/), it doesn’t actually show what each looks like on the various devices. As a result, I often end up tinkering with those a bit more than I would like to.

In the case of Font Size, there are four options to choose from:

  • Micro
  • Small
  • Medium
  • Large

image

 

And for Label Styles there are

  • BodyStyle
  • CaptionStyle
  • ListItemDetailTextStyle
  • ListItemTextStyle
  • SubtitleStyle
  • TitleStyle

…and of course you can always define your own custom styles.

image

 

Additionally, there are three options when it comes to Font Attributes:

  • None
  • Bold
  • Italic

image

 

To save time in the future, I have created a small demo application that simply renders each style / font size for each platform, and you can see the results in the screenshots above. Source code for the sample application can be found here: https://github.com/Wintellect/XamarinSamples/tree/master/TextStylesDemo

 

Footnote: After writing up this sample I realized that it somewhat duplicates a portion of the sample code from Charles Petzold’s upcoming “Creating Mobile Apps with Xamarin.Forms” book (currently in preview form). I’m OK with that though, because I plan to build upon this sample in the next few articles here. And you should be sure to download and read his book as well – it’s a great resource!