Xamarin Forms HTML in Label

Question

I am making a mobile app for my website in Xamarin Forms. In the database I have a field which contains some html.

I am using https://github.com/matteobortolazzo/HtmlLabelPlugin but I can't seem to style my html.

This is my code:

    public string Body { get; set; }

    public string BodyStyled => $"<!DOCTYPE html><html>" +
                                    $"<head>" +
                                        $"<style>" +
                                            $"p {{margin-bottom: 5px;}}" +
                                        $"</style>" +
                                    $"</head>" +
                                    $"<body>" +
                                        $"{Body}" +
                                    $"</body>" +
                                $"</html>";

                <htmlLabel:HtmlLabel
                    Grid.Row="0"
                    VerticalOptions="Center"
                    TextColor="{ DynamicResource BaseTextColor }"
                    Text="{ Binding Detail.BodyStyled }"/>

The HTML get executed but p {margin-bottom: 5px;} gets printed above the text.

How can I solve this? Thx!

This seems to be a Xamarin Forms bug. In my case the iOS version works but Android also displays the stylesheet contents above the html. — Frank

MShah MShah · Accepted Answer · 2019-07-31T11:16:50

You can try this one: 1. create custom control in your PCL project:

using Xamarin.Forms;

 namespace XYZ.CustomControl
  {
   //convert label text from HTML to simple display form
   public class CustomLabel: Label
    {
    }
  }

2. Android renderer:

using Android.Text;
using Android.Widget;
using XYZ.CustomControl;
using XYZ.Droid.Renderer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomLabel), typeof(HtmlFormattedLabelRenderer))]
namespace XYZ.Droid.Renderer
{
public class HtmlFormattedLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        var view = (CustomLabel)Element;
        if (view == null) return;
        if (!string.IsNullOrEmpty(Control.Text))
        {
            if (Control.Text.Contains("<a"))
            {
                var a = Control.Text.IndexOf("<a");
                var b = Control.Text.IndexOf("</a>");
                var d = Control.Text.Length;
                var c = Control.Text.Length - Control.Text.IndexOf("</a>");
                int length = b - a+4;

                string code = Control.Text.Substring(a , length);
                Control.SetText(Html.FromHtml(view.Text.ToString().Replace(code,string.Empty)), TextView.BufferType.Spannable);
            }
            else
                Control.SetText(Html.FromHtml(view.Text.ToString()), TextView.BufferType.Spannable);
        }
    }
   }
}

iOS renderer

 using Foundation;
 using XYZ.CustomControl;
 using XYZ.iOS.Renderer;
 using UIKit;
 using Xamarin.Forms;
 using Xamarin.Forms.Platform.iOS;
  [assembly: ExportRenderer(typeof(CustomLabel), 
typeof(HtmlFormattedLabelRendereriOS))]
namespace XYZ.iOS.Renderer
{
     public class HtmlFormattedLabelRendereriOS:LabelRenderer
  {
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
    base.OnElementChanged(e);

    var view = (CustomLabel)Element;
    if (view == null) return;

    var attr = new NSAttributedStringDocumentAttributes();
    var nsError = new NSError();
    attr.DocumentType = NSDocumentType.HTML;

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

    var mutable = Control.AttributedText as NSMutableAttributedString;
    UIStringAttributes uiString = new UIStringAttributes();
    uiString.Font = UIFont.FromName("Roboto-Regular",15f);
    uiString.ForegroundColor = UIColor.FromRGB(130, 130, 130);

    if (!string.IsNullOrEmpty(Control.Text))
    {
        if (Control.Text.Contains("<a"))
        {
            var text1 = Control.Text.IndexOf("<a");
            var text2 = Control.Text.IndexOf("</a>");
            int length = text2 - text1 + 4;

            string code = Control.Text.Substring(text1, length);
            Control.Text = Control.Text.Replace(code, string.Empty);                   
        }
    }

    mutable.SetAttributes(uiString, new NSRange(0, Control.Text.Length));

}
 }
   }

Hope this helps you to solve your problem.

Xamarin Forms HTML in Label

2 Answers