有什么办法可以将HTML添加到Xamarin.Forms页面吗？

Question

我希望能够在Xamarin.Forms页面中添加一些HTML吗？这可能吗？还可以将其添加为标签的一部分吗？

Answer 1

如果你想要全面的HTML支持，那么Xamarin表单WebView就可以了。但是如果你想要Label中的一些基本格式支持，因为它是原生的反对部分（在android中为TextView，在iOS中为UILabel），你可以为它实现渲染器。

表单控件

public class HtmlLabel : Label
{
    public static readonly BindableProperty HtmlProperty =
        BindableProperty.Create(
            "Html", typeof(string), typeof(HtmlLabel),
            defaultValue: default(string));

    public string Html
    {
        get { return (string)GetValue(HtmlProperty); }
        set { SetValue(HtmlProperty, value); }
    }
}

iOS渲染器

[assembly: ExportRenderer(typeof(HtmlLabel), typeof(HtmlLabelRenderer))]
namespace HtmlLabelApp.iOS
{
    public class HtmlLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            //if we have a new forms element, we want to update text with font style (as specified in forms-pcl) on native control
            if (e.NewElement != null)
                UpdateTextOnControl();
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            //if there is change in text or font-style, trigger update to redraw control
            if (e.PropertyName == nameof(HtmlLabel.Html))
            {
                UpdateTextOnControl();
            }
        }

        void UpdateTextOnControl()
        {
            if (Control == null)
                return;

            if (Element is HtmlLabel formsElement)
            {
                //set new text with ui-style-attributes to native control (UILabel)
                var htmlString = new NSString(formsElement.Html ?? string.Empty);
                var htmlData = htmlString.Encode(NSStringEncoding.UTF8);
                var attr = new NSAttributedStringDocumentAttributes
                {
                    DocumentType = NSDocumentType.HTML
                };

                var error = new NSError();
                var dict = new NSDictionary();

                var attributedString = new NSAttributedString(htmlData, attr, out dict, ref error);
                Control.AttributedText = attributedString;
            }
        }
    }
}

Android渲染器

[assembly: ExportRenderer(typeof(HtmlLabel), typeof(HtmlLabelRenderer))]
namespace HtmlLabelApp.Droid
{
    public class HtmlLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            //if we have a new forms element, we want to update text with font style (as specified in forms-pcl) on native control
            if (e.NewElement != null)
                UpdateTextOnControl();
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            //if there is change in text or font-style, trigger update to redraw control
            if (e.PropertyName == nameof(HtmlLabel.Html))
            {
                UpdateTextOnControl();
            }
        }

        void UpdateTextOnControl()
        {
            if (Control == null)
                return;

            if (Element is HtmlLabel formsElement)
            {
                var htmlAsString = formsElement.Html ?? string.Empty;      // used by WebView
                var htmlAsSpanned = Html.FromHtml(htmlAsString, FromHtmlOptions.ModeCompact); // used by TextView

                Control.TextFormatted = htmlAsSpanned;
            }
        }
    }
}

样本用法

<local:HtmlLabel BackgroundColor="Silver">
    <local:HtmlLabel.Html>
        <x:String>
        <![CDATA[

            <h1>Main Title</h1>
            <h2>A sub-title</h2>
            <p>This is some html. Look, here\'s an <u>underline</u>.</p>
            <p>Look, this is <em>emphasized.</em> And here\'s some <b>bold</b>.</p>
            <p>This is a UL list:
            <ul>
             <li>One</li>
             <li>Two</li>
             <li>Three</li>
            </ul>
            <p>This is an OL list:
            <ol>
             <li>One</li>
             <li>Two</li>
             <li>Three</li>
            </ol>
        ]]>
        </x:String>
    </local:HtmlLabel.Html>
</local:HtmlLabel>