2016-03-17 4 views
3

В моем приложении у меня есть Contentpage с прокруткой в ​​нем. Scrollview в свою очередь содержит StackLayout с большим количеством ярлыков с текстом. В середине этого я хочу вставить некоторый статический HTML.Как добавить HTML в Stacklayout внутри прокрутки в форматах Xamarin?

Я попытался добавить WebView со статической HTML, как ребенок к StackLayout но Webview не видна, то (возможно, высота получает вычисляется к нулю)

Кто-нибудь знает, как это исправить? Или есть какой-то другой способ добавить HTML-код между всеми ярлыками?

StackLayout mainLayout = new StackLayout(); 

// Adding many labels of different sizes 
mainLayout.Children.Add (new Label {Text = "Label text"}); 

mainLayout.Children.Add (new WebView { 
      Source = new HtmlWebViewSource { 
       Html = "<html><body>Hello</body></html>" 
      } 
}); 

// Adding many more labels of different sizes 
mainLayout.Children.Add (new Label {Text = "Even more Label text"}); 

Content = new ScrollView { 
      Content = mainLayout 
     }; 
+0

проверить https://developer.xamarin.com/guides/xamarin-forms/working-with/webview/ –

+0

У меня была аналогичная проблема, и мое решение потребовало написать собственный рендерер, чтобы подключить на OnPageFinished WebViewClient, затем используйте javascript для вычисления высоты и, соответственно, для его правильной установки. Если у вас более или менее всегда один и тот же контент, вы можете просто установить значение HeightRequest на соответствующее значение, это будет намного проще;) – markusian

+0

К сожалению, контент может сильно отличаться по размеру, поэтому он похож на ваш case, есть ли какой-то код, который вы бы рассмотрели, я еще не эксперт в пользовательских рендерерах :) – Robban

ответ

3

См https://developer.xamarin.com/guides/xamarin-forms/user-interface/webview/, в частности:

WebView требует, чтобы HeightRequest и WidthRequest указаны когда они содержатся в StackLayout или RelativeLayout. Если вы не указали , эти свойства не будут отображаться.

HeightRequest и WidthRequest не указаны в фрагменте кода выше, поэтому исправление этого должно быть следующим, что нужно попробовать.

+0

Спасибо, что исправляет проблему с содержимым, не показывающим, но у меня все еще есть проблема, так как я не знаю размер html так как он вводится пользователем в экстраординарной системе, есть ли способ его вычислить? – Robban

+0

Попробуйте установить HeightRequest на некоторое разумное предположение, а VerticalOptions = LayoutOptions.FillAndExpand. Если это не дает вам результата, которому вы довольны, вам может понадобиться настраиваемый рендерер, как предлагается маркусиан. – DavidS

2

Я нашел отличное решение here

using Xamarin.Forms; 

namespace YourNamespace 
{ 
    public class HtmlLabel : Label 
    { 
    } 
} 

IOS визуализатор

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

      if (e.NewElement == null) 
      { 
       return; 
      } 

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

      var text = e.NewElement.Text; 

      //I wrap the text here with the default font and size 
      text = "<style>body{font-family: '" + this.Control.Font.Name + "'; font-size:" + this.Control.Font.PointSize + "px;}</style>" + text; 

      var myHtmlData = NSData.FromString(text, NSStringEncoding.Unicode); 
      this.Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError); 

     } 

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

      if (this.Control == null) 
      { 
       return; 
      } 

      if (e.PropertyName == Label.TextProperty.PropertyName) 
      { 
       var attr = new NSAttributedStringDocumentAttributes(); 
       var nsError = new NSError(); 
       attr.DocumentType = NSDocumentType.HTML; 

       var myHtmlData = NSData.FromString(this.Control.Text, NSStringEncoding.Unicode); 
       this.Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError); 
      } 
     } 
    } 
} 

Android рендерер

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

      Control?.SetText(Html.FromHtml(Element.Text), TextView.BufferType.Spannable); 
     } 

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

      if (e.PropertyName == Label.TextProperty.PropertyName) 
      { 
       Control?.SetText(Html.FromHtml(Element.Text), TextView.BufferType.Spannable); 
      } 
     } 
    } 
} 

Я нашел Html.FromHtml довольно простой. Я закончил привязку this library, которая помогала в списках и (с небольшой работой) тегах span.

+0

Спасибо! Отлично работает в моем сценарии. – fuzz

+2

Знаете ли вы, есть ли способ сделать рендер UWP? – Ben

Смежные вопросы