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.
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();
}
}
}
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 NIGHT" FontAttributes="Bold,Italic" HorizontalOptions="Start" VerticalOptions="Start"> </Label> </StackLayout> </ContentPage>
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.
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