Custom Renderer for displaying html text into Label

In Xamarin Form project create ExtendedHtmlLabel Class that Inherit the Label Class.

ExtendedHtmlLabel.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace Mechat.Renderer
{
    public class ExtendedHtmlLabel :Label
    {

    }

}

Xamarin.Android

Then in Android Project Create the Class ExtendedHtmlLabelRenderer.cs that Inherit the Label Renderer.

ExtendedHtmlLabelRenderer.cs

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using Android.App;

using Android.Content;

using Android.OS;

using Android.Runtime;

using Android.Support.V4.Text;

using Android.Text;

using Android.Views;

using Android.Widget;

using Mechat.Droid.Renderer;

using Mechat.Renderer;

using Xamarin.Forms;

using Xamarin.Forms.Platform.Android;

[assembly:ExportRenderer(typeof(ExtendedHtmlLabel),typeof(ExtendedHtmlLabelRenderer))]

namespace Mechat.Droid.Renderer

{

    public class ExtendedHtmlLabelRenderer : LabelRenderer

    {

        public ExtendedHtmlLabelRenderer(Context context) : base(context)

        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)

        {

            base.OnElementChanged(e);

            if (Control != null)

            {

                Control.TextFormatted = Build.VERSION.SdkInt >= BuildVersionCodes.N

? Html.FromHtml(Element.Text, FromHtmlOptions.ModeCompact)

: Html.FromHtml(Element.Text);

                Control.MovementMethod = new Android.Text.Method.LinkMovementMethod();

            }

        }

    }

}

Xamarin.iOS

Then in iOS Project Create the Class ExtendedHtmlLabelRenderer.cs that Inherit the Label Renderer.

ExtendedHtmlLabelRenderer.cs

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using Foundation;

using Mechat.iOS.Renderer;

using Mechat.Renderer;

using UIKit;

using Xamarin.Forms;

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ExtendedHtmlLabel), typeof(ExtendedHtmlLabelRenderer))]

namespace Mechat.iOS.Renderer

{

    public class ExtendedHtmlLabelRenderer :LabelRenderer

    {

        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)

        {

            base.OnElementChanged(e);

            if (Control != null && Element != null && !string.IsNullOrWhiteSpace(Element.Text))

            {

                var attr = new NSAttributedStringDocumentAttributes();

                var nsError = new NSError();

                attr.DocumentType = NSDocumentType.HTML;

                var myHtmlData = NSData.FromString(Element.Text, NSStringEncoding.Unicode);

                Control.Lines = 0;

                Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError);

            }

        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Label.TextProperty.PropertyName)

            {

                if (Control != null && Element != null && !string.IsNullOrWhiteSpace(Element.Text))

                {

                    var attr = new NSAttributedStringDocumentAttributes();

                    var nsError = new NSError();

                    attr.DocumentType = NSDocumentType.HTML;

                    var myHtmlData = NSData.FromString(Element.Text, NSStringEncoding.Unicode);

                    Control.Lines = 0;

                    Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError);

                }

            }

        }

    }

}

Now implement this Renderer on Xamairn Page.

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"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:extendControl="clr-namespace:Mechat.Renderer"

             mc:Ignorable="d"

             x:Class="Mechat.MainPage">

    <StackLayout>

        <!-- Place new controls here -->

        <extendControl:ExtendedHtmlLabel 

           HorizontalOptions="Center" x:Name="txtLabel"

           VerticalOptions="CenterAndExpand" />

    </StackLayout>

</ContentPage>

MainPage.xaml.cs

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace Mechat

{

    // Learn more about making custom code visible in the Xamarin.Forms previewer

    // by visiting https://aka.ms/xamarinforms-previewer

    [DesignTimeVisible(false)]

    public partial class MainPage : ContentPage

    {

        public MainPage()

        {

            InitializeComponent();

            txtLabel.Text = "<html><body ><h1 ><i>Hello</i></h1><br/><b>Demo Test</b><br> <b>H₂O</b><br/><font color='red'>This is some text!</font></body></html>";

        }

    }

}