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!
2 answers
solution1
5 2020-03-04 12:48:08
use the latest version of Xamarin forms
<Label TextType="Html">
<![CDATA[
This is <strong style="color:red">HTML</strong> text.
]]>
</Label>
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label
solution2
1 ACCPTED 2019-07-31 11: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.
solution3
0 2019-08-01 05:41:36
When I try your code, I did not see p {margin-bottom: 5px;} gets printed above the text, it just has no effect on the text, also I test the font-size and etc. None of these properties works on the HtmlLabel . So maybe this plugin does not support this.
Instead of using HtmlLabel , you can use a WebView to load these HTML strings. You can also load the local-html-content with CSS style.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.