Xamarin Forms - WebView com Progressbar

O componente WebView é uma view usada para a exibição de conteúdos web e HTML em seu aplicativo. O WebView é muito versátil e possui os seguintes recursos:

Hoje veremos como exibir conteúdo HTML em um WebView usando uma Progressbar para acompanhar a carga do conteúdo.

Abra o VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Cross Platform App (Xamarin.Forms) e informe o nome XF_WebViewProgressBar.

Ao criar um projeto Xamarin Forms em uma versão anterior à atualização 15.5, você tinha duas opções para compartilhar o código entre as plataformas:

Pois a partir da versão 15.5 do Visual Studio(lançada em dezembro/2017) a opção Portable Class Library (PCL) foi substituida pela .NET Standard:

Marque as opções Android e/ou iOS, marque Xamarin Forms e a seguir marque .NET Standard e clique no botão OK.

Pronto nosso projeto já esta criado. (Verifique a necessidade de atualizar a versão do Xamarin Forms no seu projeto. Atualmente(06/2018) a versão mais atual é a 3.0.0)

<?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:XF_WebViewProgressbar" x:Class="XF_WebViewProgressbar.MainPage">

Neste código temos:

Um controle StackLayout que esta empilhando os controles :

- 1 Label onde temos estamos exibindo o texto no topo da página;
- 1 Progressbar onde propriedade Progress foi definida em 0.2;
- 1 WebView onde definimos os eventos OnNavigating e OnNavigated;

No arquivo MainPage.xaml.cs temos a atribuição da página a ser exibida e o código dos eventos implementados:

using Xamarin.Forms;
namespace XF_WebViewProgressbar
{
    public partial class MainPage : ContentPage
   {
public MainPage()
{
        InitializeComponent();
                    webview1.Source = "http://uol.com.br";
}

        protected async override void OnAppearing()
        {
            base.OnAppearing();
            await progressbar1.ProgressTo(0.9, 900, Easing.SpringIn);
        }

        protected void OnNavigating(object sender, WebNavigatingEventArgs e)
        {
            progressbar1.IsVisible = true;
        }

        protected void OnNavigated(object sender, WebNavigatedEventArgs e)
        {
            progressbar1.IsVisible = false;
        }
    }
}

Neste código no evento OnAppearing() estamos definidos a animação para a progressbar no método ProgressTo e no evento OnNavigating() estamos exibindo a progressbar; No evento OnNavigated, ao terminar a navegação, estamos ocultando a progressbar.

Executando o projeto usando o emulador Genymotion para o Android iremos obter o seguinte resultado:

Pegue o código do projeto compartilhado aqui : XF_WebViewProgressbar.zip (sem as referências)

'Agora é o juízo deste mundo; agora será expulso o príncipe deste mundo.
E eu, quando for levantado da terra, todos atrairei a mim.
E dizia isto, significando de que morte havia de morrer.'
João 12:31-33

Xamarin Forms - Usando ProgressBar - Macoratti