Я хотел бы добавить HTML-код на страницу Xamarin.Forms? Это возможно? Также можно добавить это как часть метки?
Есть ли способ добавить HTML на страницу Xamarin.Forms?
Ответ 1
Если вам нужна полномасштабная поддержка html, то форма Xamarin WebView
будет способ пойти. Но если вам нужна базовая поддержка форматирования в Label
, так как это встроенные счетчики (TextView
в android и UILabel
в iOS), вы можете реализовать для этого средства визуализации.
Управление формами
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\ an <u>underline</u>.</p>
<p>Look, this is <em>emphasized.</em> And here\ 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>
Ответ 2
Вы можете реализовать HTML с тегом Img?