標簽中的 Xamarin 表單 HTML

Question

我正在用 Xamarin Forms 為我的網站制作一個移動應用程序。 在數據庫中，我有一個包含一些 html 的字段。

我正在使用https://github.com/matteobortolazzo/HtmlLabelPlugin但我似乎無法設置我的 html 樣式。

這是我的代碼：

    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 }"/>

HTML 被執行，但 p {margin-bottom: 5px;} 被打印在文本上方。

我該如何解決這個問題？ 謝謝！

Answer 1

使用最新版本的 Xamarin 表單

<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

Answer 2

你可以試試這個： 1. 在你的 PCL 項目中創建自定義控件：

using Xamarin.Forms;

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

2.安卓渲染器：

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 渲染器

 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)); } } }

希望這可以幫助您解決您的問題。

Answer 3

當我嘗試您的代碼時，我沒有看到p {margin-bottom: 5px;}被打印在文本上方，它對文本沒有任何影響，我也測試了font-size等。這些屬性均不適用於HtmlLabel 。 因此，也許此插件不支持此功能。

可以使用WebView加載這些HTML字符串，而不是使用HtmlLabel 。 您還可以使用CSS樣式加載local-html-content 。

標簽中的 Xamarin 表單 HTML

問題描述

2 個解決方案

解決方案1
5 2020-03-04 12:48:08

解決方案2
1 已采納 2019-07-31 11:16:50

解決方案3
0 2019-08-01 05:41:36

標簽中的 Xamarin 表單 HTML

問題描述

2 個解決方案

解決方案1 5 2020-03-04 12:48:08

解決方案2 1 已采納 2019-07-31 11:16:50

解決方案3 0 2019-08-01 05:41:36

解決方案1
5 2020-03-04 12:48:08

解決方案2
1 已采納 2019-07-31 11:16:50

解決方案3
0 2019-08-01 05:41:36