CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.androidxamarin.ios
HarshShah
HarshShah

Reputation: 33

Insert Html file content in xamarin forms

I have one Html file. That html file contains only some div. and i have applied some styles to that all div like margin, color and font-family. Now i want to make a page in my xamarin form app(both in ios and android) and want to add that html file's whole contain in my page.

I have tried by using web view control of xamarin forms. But my html file's content is too long, and because of that, xamarin code is going too long too as we have to applied html as a string to web view control. so i don't want to use that way.

So please give me brief explanation or solution to add html file in xamarin forms. Hope for better solution. Thanks in advance.

Upvotes: 1

Views: 2653

Answers (2)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

If you want to load local html in your contentpage, I suggest you can use DependencyService to get html url from Android Assets file, I create simple in android that you can take a look.

Firstly, creating html in Android--Assets file, name as TestWebPage.html.

Then Creating Interface in Form, IBaseUrl.

public interface IBaseUrl
{
    string GetUrl();
}

Then implementing this interface in Android platform:

public class LocalFiles : IBaseUrl
{
    public string GetUrl()
    {
        return "file:///android_asset/";
    }
}

ContentPage code:

<StackLayout>
    <!--  Place new controls here  -->
    <WebView
        x:Name="webviewjava"
        HeightRequest="300"
        WidthRequest="300" />
</StackLayout>

public MainPage()
    {
        InitializeComponent();

        var urlSource = new UrlWebViewSource();

        string baseUrl = DependencyService.Get<IBaseUrl>().GetUrl();
        string filePathUrl = Path.Combine(baseUrl, "TestWebPage.html");
        urlSource.Url = filePathUrl;
        webviewjava.Source = urlSource;
    }

Here is the sample at github, you can take a look:

https://github.com/CherryBu/htmlapp

Upvotes: 0

Almir Vuk
Almir Vuk

Reputation: 3173

Not 100% sure what do you mean by "xamarin code is going to long too".

But you can make HtmlWebViewSource object in your ViewModel or in a code-behind, depending what approach you are using and later on you can set or bind WebViews's Source property to it.

In order to set it from code-behind you can do it like this:

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = @"<html><body><h1>Xamarin is awesome</h1></body></html>";
yourWebView.Source = htmlSource;

On the other hand, if you are using MVVM and whole View-ViewModel concept you just need to have a property in your ViewModel of type HtmlWebViewSource and do the simple binding in your View.

Let's say you have the property of type HtmlWebViewSource named HtmlSource, you can set its value to your HTML content like we did in the previous example and than bind to it from WebView control, that should look something like this:

<WebView x:Name="yourWebView" Source="{Binding HtmlSource}"  WidthRequest="1000" HeightRequest="1000" />

Hope this was helpful for you, wishing you lots of luck with coding!

Upvotes: 1

Related Questions