Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 91519

How do I display a loading overlay within Forms while using a custom WebView renderer?

$
0
0

I’m trying to figure out how best to accomplish adding a loading overlay to a Xamarin Forms project with a custom renderer for iOS and Android WebViews.

I have a loading overlay written in XAML that is included within my webPage.xaml code. The custom renderers call two event handlers in my App.xaml.cs file for Navigating and Navigated. What I would like to do is hook up the Navigated and Navigating event handlers so that they will notify my webPage ContentPage that the current WebView is attempting to load content within the WebView. This would allow me to then set the IsVisible and IsRunning properties, of the appropriate loading overlay subview, and have it displayed.

I’ve attempted to come up with my own solution using Data Binding but I’ve been unsuccessful thus far. I’ve attached a link to my Bitbucket Git Repository where the sample project is stored. Any direction or advice on how best to proceed would be appreciated.

Please note that the loading overlay can be tested by pressing a toolbar button item at the top right of the application.

Here is the URL for the repository source code: https://bitbucket.org/TimothyCarter/webloading/src
Download the repository zip: https://bitbucket.org/TimothyCarter/webloading/downloads

Additional Notes:
I've not had to use a ton of data binding beyond list views. So this may all come from my lack of experience with data binding outside of adding basic classes to a listview.

This solution will also need to use an INotifyPropertyChanged implementation in order for the ContentPage to recognize that the value of the object has been modified. I haven't been able to make it past setting up the initial binding so I have yet to make it this far.


Viewing all articles
Browse latest Browse all 91519

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>