Xamarin.Forms.WebView initial loading indicator

Question

What is the simplest way for me to take a Xamarin forms WebView and add a loading progress bar for the first load?

My application simply wraps a website but in poor bandwidth scenarios when the splash screen disappears and the WebView is loading it's content I of course see a white screen.

I would like to see a progress indicator. I have looked around but haven't found a simple solution to this and most questions are not oriented towards Xamarin.Forms.

Thanks in advance.

Kind Regards, Mark

Answer 1

Just use StackLayout with ActivityIindicator and WebView as children and set it's visibility based on IsWorking property value which is set in WebView.Navigating and WebView.Navigated events. Your ViewModel has to implement IOnPropertyChanged.

var webViewView = new WebView() {
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
};
webViewView.SetBinding<YourViewModel>(View.IsVisibleProperty, v => v.IsWorking, 
    BindingMode.OneWay, new Converters.NegateBoolConverter());

webViewView.Navigating += (sender, e) => {
    viewModel.IsWorking = true;
};

webViewView.Navigated += (sender, e) => {
    viewModel.IsWorking = false;
};

var activityIndicator = new ActivityIndicator() {
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
};
activityIndicator.SetBinding<YourViewModel>(ActivityIndicator.IsRunningProperty, v => v.IsWorking);

var isWorkingView = new ContentView() {
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Content = activityIndicator
};
isWorkingView.SetBinding<YourViewModel>(ContentView.IsVisibleProperty, v => v.IsWorking);

var root = new StackLayout() {
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = {
        webViewView,
        isWorkingView,
    }
};