MAUI WebView displaying decoded Html content in ObservableProperty binding, when it isn't decoded

Question

I have a MAUI WebView, and I am using it as a container to display html formatted content, this content is from an API and contains encoded html content

In my .xaml file:

<WebView HeightRequest="300">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding MyHtml}" />
    </WebView.Source>
</WebView>

In my ViewModel .cs file:

[ObservableProperty]
private string myHtml;

...

MyHtml= APIModel.HtmlString.ToString(); // this contains the following string: "<strong><span style="font-size: 20px;">M</span></strong><span style="color: rgb(247, 150, 70);">e</span>mo<span style="font-size: 24px; font-family: Verdana;"><em>6</em></span>"

It should display the html content with it's appropriate formatting, but I am not sure why it displays it in decoded format as seen in the image below:

Screenshot

Appreciate the help in advance!

From my tests, the binding content within MyHtml object remains correct in it's encoded html format, but for some reason the display shows up in encoded format when binded

Answer 1

If you want to set the Html string in code behind, you may make some changes.

< in C# should be equivalent to < in C#

> in C# should be equivalent to > in C#

" in C# should be equivalent to \" in C#

So when you define the Html string in code behind, you should change to the corresponding format. Your Html in C# should be like this:

MyHtml = "<strong><span style=\"font-size: 20px;\">M</span></strong><span style=\"color: rgb(247, 150, 70);\">e</span>mo<span style=\"font-size: 24px; font-family: Verdana;\"><em>6</em></span>";

Two ways to achieve this:

1.Use Replace method to convert:

 NewHtml = MyHtml.Replace("&lt;","<").Replace("&gt;",">").Replace("&quot;","\"");

2.Use ValueConverter

Firstly, you should generate a Value Converter:

public class MyHtmlConverter :IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return ((string)value).Replace("&lt;", "<").Replace("&gt;", ">").Replace("&quot;", "\"");
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then define it in xaml and consume it in Binding expression:

<ContentPage.Resources>
    <local:MyHtmlConverter x:Key="myHtmlConverter"/>
</ContentPage.Resources>

...
<WebView HeightRequest="300">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding MyHtml,Converter={StaticResource myHtmlConverter}}" />
    </WebView.Source>
</WebView>

For more info, you may refer to Display local HTML