'How can I show HTML inside a Xamarin.Forms page with source for HTML in C#?

I wrote this code to try and show a couple of lines of HTML within a web page:

I have this XAML:

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:Japanese;assembly=Test" 
    x:Class="Test.HelpCards" 
    x:Name="HelpCards" 
    Title="Help ▹ Cards Tab">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Spacing="10" Margin="20">
               <WebView x:Name="Browser" />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

    public HelpCards()
    {
        InitializeComponent();
        var htmlSource = new HtmlWebViewSource();
        htmlSource.Html = @"<html><body>
        <h1>ABC</h1>
        <p>DEF</p>
        </body></html>";
        Browser.Source = htmlSource;
    }

However when running the code I see only a blank page.

Does anyone have any ideas as to what might be wrong?



Solution 1:[1]

The webview can be in the ContentPage.Content by itself. No need to wrap it in a ScrollView or StackLayout. This method also doesn't require Horizontal or Vetical Options to be specified as well.

<ContentPage.Content>
    <WebView x:Name="Browser" />
</ContentPage.Content>

Solution 2:[2]

For the people that also stumbled across this question:

Xamarin has updated the label element at some point. The update included a way to display HTML in the label element, by adding TextType="Html" to the element.

Example:

<Label TextType="Html">
    <![CDATA[
    This is <strong style="color:red">HTML</strong> text.
    ]]>
</Label>

(Source: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#display-html)

This is my first answer on Stack Overflow. Please tell me how I can improve.

Solution 3:[3]

Try this with the webBrowser

    public MainPage()
    {
        InitializeComponent();
        CheckWifiOnStart();
        CheckWifiContinously();
    }

    private void CheckWifiOnStart()
    {
        var source = new HtmlWebViewSource();
        source.BaseUrl = "file://android_asset/";


        //CONTROL TO SEE IF USER IS CONNECTED 
        if (!CrossConnectivity.Current.IsConnected)
        {
            Browser.Source = "file:///android_asset/index.html";
        }
        else
        {
            Browser.Source = "ONLINE URL";
        }
    }

    private void CheckWifiContinously()
    {
        var source = new HtmlWebViewSource();
        source.BaseUrl = "file://android_asset/";

        //CONTROL TO CONNECTIVITY CHANGE
        CrossConnectivity.Current.ConnectivityChanged += (sender, args) => {

            if (!CrossConnectivity.Current.IsConnected)
            {
                DisplayAlert("ERROR", "OFFLINE MODE", "OK");
                Browser.Source = "file:///android_asset/index.html";
            }
            else
            {
                DisplayAlert("INTERNET DETECTED", "ONLINE MODE", "OK");
                Browser.Source = "ONLINE URL";
            }          
        };
    }

    public interface IBaseUrl { string GetFile(); }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 heinst
Solution 2 BOT Alex
Solution 3 JosuNC