Activity Indicator while loading WebView Xamarin forms

Question

I want to load an Activity indicator first when the WebView is loading data , then it turns Invisible after loading data.

Below is my Xaml Code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="Shows Trending" xmlns:o="clr-namespace:Octane.Xam.VideoPlayer;assembly=Octane.Xam.VideoPlayer" x:Class="BBSTV.TrendingShowsDetails">
    <ActivityIndicator x:Name="activity_indicator" Color="Blue" />
    <WebView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="loadVideo_wv">
    </WebView>
</ContentPage>

Below is my C# code:

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace BBSTV
{
    public partial class TrendingShowsDetails : ContentPage
    {
        public TrendingShowsDetails(string videolink)
        {
            InitializeComponent();
            activity_indicator.IsRunning = true;
            loadVideo_wv.Source = "https://www.youtube.com/playlist?list=" + videolink;
            activity_indicator.IsRunning = false;
        }
    }
}

Answer 1

Try out this :

C# code :

public TrendingShowsDetails(string videolink)
        {
            InitializeComponent();

            loadVideo_wv.Source = "https://www.youtube.com/playlist?list=" + videolink;

        }


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

        }

        public void OnNavigating(object sender, WebNavigatingEventArgs e)
        {
            activity_indicator.IsVisible = true;


        }

        public void OnNavigated(object sender, WebNavigatedEventArgs e)
        {

            activity_indicator.IsVisible = false;

        }

Xaml Code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    Title="Shows Trending" xmlns:o="clr-namespace:Octane.Xam.VideoPlayer;assembly=Octane.Xam.VideoPlayer" x:Class="BBSTV.TrendingShowsDetails">
    <StackLayout>
    <ProgressBar  Progress="0.2" IsVisible="false" HorizontalOptions="FillAndExpand" x:Name="activity_indicator"  />

    <WebView VerticalOptions="FillAndExpand" Navigating="OnNavigating" Navigated="OnNavigated" HorizontalOptions="FillAndExpand" x:Name="loadVideo_wv">
    </WebView>
    </StackLayout>
</ContentPage>