Xamarin Forms – How to use WebView

In this post we will see How we can use WebView in our Xamarin Forms application. WebView in Xamarin forms are used to display html pages inside an app or load an external URL inside the application itself.

Xamarin Forms Webview supports following contents:

1. HTML & CSS : It supports html and CSS including Javascript.
2. Documents: Because it is native implementation on each platform, webviews are capable of showing documents that are supported on each platform.
3. HTML strings – It can show HTML strings from memory
4. Local Files – Webview can load local html and text files present inside the application memory.

So let’s create our Webview in Xamarin.Forms.
DOWNLOAD SOURCE CODE

In your project, create a new Content Page with name MainPage and edit it as below:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamWebView"
x:Class="XamWebView.MainPage">

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!-- Place new controls here -->
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Button Text="&lt;" WidthRequest="50" x:Name="btnBack" Clicked="BtnBack_Clicked"
Grid.Column="0" Grid.Row="0" FontAttributes="Bold" FontSize="Small" HeightRequest="40"
BackgroundColor="#f2f2f2" TextColor="#1e3799" HorizontalOptions="Start"
VerticalOptions="Center"/>
<Entry x:Name="entryURL" HorizontalOptions="FillAndExpand" VerticalOptions="Start"
Text="https://www.google.com/"
HeightRequest="45" Grid.Row="0" Grid.Column="1" Completed="EntryURL_Completed"/>

<Button x:Name="btnLoad" Text="GO" HorizontalOptions="Start" Grid.Row="0"
WidthRequest="50" FontSize="Small" BackgroundColor="#1e3799" TextColor="#fff"
HeightRequest="40" VerticalOptions="Center"
Grid.Column="2" IsVisible="True" Clicked="BtnLoad_Clicked"/>

<ActivityIndicator x:Name="activityIndicator" Grid.Row="0" Color="#1e3799"
HorizontalOptions="Center" VerticalOptions="Center"
Grid.Column="2" IsVisible="False" HeightRequest="35" WidthRequest="35"/>
</Grid>

<WebView Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"

Navigating="MyWebView_Navigating" x:Name="myWebView" Navigated="MyWebView_Navigated"/>
</Grid>

</ContentPage>

This page contains two buttons for loading url inside the webview and going back. An entry component to accept URLs from the user and load it. ActivityIndicator to show that URL is being loaded on webview.

Edit its code file as below:

MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamWebView
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
ShowProgress(false);
}

private void EntryURL_Completed(object sender, EventArgs e)
{
//ShowProgress(true);
LoadWebPage();
}

private void MyWebView_Navigating(object sender, WebNavigatingEventArgs e)
{
ShowProgress(true);
entryURL.Text = e.Url.ToString();
}

private void BtnLoad_Clicked(object sender, EventArgs e)
{
LoadWebPage();
}

public void LoadWebPage()
{
ShowProgress(true);
if (entryURL.Text != null && !entryURL.Text.ToString().Trim().Equals(""))
myWebView.Source = new UriBuilder(entryURL.Text.ToString()).Uri;
}

private void MyWebView_Navigated(object sender, WebNavigatedEventArgs e)
{
entryURL.Text = e.Url.ToString();
ShowProgress(false);
}

public void ShowProgress(Boolean show)
{
activityIndicator.IsVisible = show;
activityIndicator.IsRunning = show;
btnLoad.IsVisible = !show;
}

private void BtnBack_Clicked(object sender, EventArgs e)
{
ShowProgress(true);
if (myWebView.CanGoBack)
myWebView.GoBack();
else
{
entryURL.Text = "http://www.google.com";
LoadWebPage();

}

}
}
}

We will display the acitivityIndicator when the url is being loaded on our webview. Once it is loaded we can show the navigation button and hide activityIndicator using the “WebView_Navigated” method for xamarin.
Now run your app.
Output:
DOWNLOAD SOURCE CODE

DOWNLOAD SOURCE CODE