HTML label text not rendering once page is loaded in xamarin forms - html

Question

We are using Xam.Plugin.HtmlLabel plugin in our xamarin forms application. When we set the html string in constructor, the html label is loading correctly in ios. But we assign the same label in method and called the method in constructor it is not loading in iOS and in android it's working fine. The issue reproduced code snippet is mentioned below. This issue is occurred only in iOS.
HTMLPage.xaml
<ContentPage.Content>
<Grid>
<ScrollView
Padding="24"
HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Never">
<htmlLabel:HtmlLabel
Text="{Binding HTMLDescription}"
LinkColor="{StaticResource LinkColor}"
TextColor="{StaticResource PriTextColor}" />
</ScrollView>
</Grid>
</ContentPage.Content>
HTMLPage.xaml.cs
private string htmlDescription;
public string HTMLDescription
{
get { return htmlDescription; }
set { htmlDescription = value; OnPropertyChanged(); }
}
public HTMLPage(string Description)
{
InitializeComponent();
GetHTML(Description);
BindingContext = this;
}
private async void GetHTML(string description)
{
await Task.Delay(2000); //This delay is for getting the data from server.
HTMLDescription = description;
}

Answer 1

In whatever code does new HTMLPage("this is some html"), are you on the UI thread?
If not on UI thread, then that's your problem - dealing with UI elements off the UI thread is problematic.
If running on UI thread, then you have a different problem: a constructor is a "blocking" operation - it does no good to have async/await on code called inside a constructor; UI thread is blocked until the constructor returns! In general, its a bad idea to do anything lengthy there. Worst case, web query might delay until timeout.
Instead, try setting HTMLDescription AFTER page has appeared:
// Hold it until used.
string Description;
public HTMLPage(string description)
{
this.Description = description;
...
}
protected override void OnAppearing()
{
base.OnAppearing();
// Move to background, so OnAppearing can return.
Task.Run(() => {
// Potentially long operation.
var html = GetHTML(Description);
// Move to UI thread, before touching any UI element.
Device.BeginInvokeOnMainThread(() => {
HTMLDescription = html;
}
}
}
private string GetHTML(string description)
{
Task.Delay(2000); //This delay is for getting the data from server.
return description;
}
NOTE: I've removed async/await from this version of GetHTML, because it is only called on a background thread. You can put those back in, if desired.
Of course the downside of this, is that the page appears at first without that label. If you don't want that, then you need to instead GetHTML(...) BEFORE calling the constructor.
So your code (in a place you don't show) would be something like this:
var html = GetHTML(...);
new HTMLPage(html);
Thus, you are back to your original case that works, where in the constructor you already have the html string, so can simply do
HTMLDescription = description;
Which begs the question: why didn't you do that in the first place? Why did you put the call to GetHtML inside the constructor?