Xamarin Forms Create HTML Formatted Label

  • by

Xamarin forms creating HTML formatted label:

Often times in our application we need to create a view wherein we can display HTML text. Showing up HTML text directly on a Label or a textView can avoid any additional libraries integration. For this purpose Xamarin forms as a inbuilt property for Label control called "TextType". This property accepts two values "Text" or "Html".  Below example shows displaying HTML text directly on a XamarinForms formatted Label using this property.

DOWNLOAD SOURCE CODE

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.MainPage"
Title="Xamarin HTML Formatted Label">

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">

<Label x:Name="lblHTML" TextType="Html" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand"/>

</StackLayout>
</ContentPage>

MainPage.xaml.cs:

using System.Text;
using Xamarin.Forms;

namespace XamSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
StringBuilder sb = new StringBuilder();
sb.Append("<h1>Xamarin Forms HTML Formatted Label</h1>");
sb.Append("<hr/>");
sb.Append("<b>Programming Languages</b>");
sb.Append("<ol>");
sb.Append("<li>C#</li>");
sb.Append("<li><u>Java</u></li>");
sb.Append("<li>PHP</li>");
sb.Append("<li><b>Python</b></li>");
sb.Append("<li>NodeJS</li>");
sb.Append("<li><i>Swift</i></li>");
sb.Append("</ol>");
sb.Append("<strike>Hello World</strike>");

lblHTML.Text = sb.ToString();
}
}
}

xamarin-forms-html-formatted-label-control

We are here showing very few HTML tags which are compatible with Xamarin forms Label control. Xamarin forms also provide us with few other properties for formatting labels other than HTML property. Other formatting example which are available are shown in the example below.

This example shows how to change text color, increase spacing, underline, strikeout text, line break, bold & italic text format on a Xamarin forms label control.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.MainPage"
Title="Xamarin HTML Formatted Label">

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">

<Label x:Name="lblHTML" TextType="Html" HorizontalOptions="Start" VerticalOptions="Start"/>

<!--Other Formatting options-->
<Label x:Name="lblOne" Text="sunday funday" TextTransform="Uppercase" TextDecorations="Underline" TextColor="#a8324e"
HorizontalOptions="Start" VerticalOptions="Start"/>
<Label x:Name="lblTwo" Text="MonDay WorkDay" TextTransform="Lowercase" TextDecorations="Strikethrough, Underline" TextColor="#a8324e"
HorizontalOptions="Start" VerticalOptions="Start"/>
<Label x:Name="lblThree" Text="Social Distancing" CharacterSpacing="10"
HorizontalOptions="Start" VerticalOptions="Start"/>

<!--NewLine Example-->
<Label TextColor="#3d005c" Text="DAY&#10;NIGHT" FontAttributes="Bold,Italic" HorizontalOptions="Start" VerticalOptions="Start">

</Label>
</StackLayout>
</ContentPage>

xamarin-forms-format-label-control-options

For supporting full HTML tags on a Label control, we need to create a custom control and implement it on Xamarin Android and Xamarin iOS native side and use it in our PCL project.

DOWNLOAD SOURCE CODE

Also see:

Xamarin forms Creating Action Sheets

Xamarin forms MVVM Binding CommandParameter to Command

Xamarin forms SQLite database – Performing CRUD operations

Xamarin forms creating and using SQLite database

Xamarin forms using Google Maps

Xamarin forms using Camera – saving Images to Gallery

Xamarin Forms Creating a Simple ListView

Xamarin Forms MVVM ListView ItemSource Binding