CODEWITHSUNDEEP
xamarinxamarin.forms
Alan2
Alan2

Reputation: 24562

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?

Upvotes: 8

Views: 3954

Answers (4)

BOT Alex
BOT Alex

Reputation: 47

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://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#display-html)

Upvotes: 5

JosuNC
JosuNC

Reputation: 26

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(); }

Upvotes: 0

Sharada
Sharada

Reputation: 13601

Make sure to specify layout-options for WebView.

<ContentPage.Content>
    <ScrollView> <!-- ScrollView not needed as WebView has inbuilt scrolling behavior -->
        <StackLayout Spacing="10" Margin="20">
           <WebView x:Name="Browser" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

Upvotes: 7

heinst
heinst

Reputation: 8786

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>

Upvotes: 3

Related Questions