Call of webview using xamarin forms - Blank screen appears after navigated event

Question

Hi, I have a xamarin application and I want to open a webview, but during the transition a blank screen is appearing. I test most of the solutions that I found by googling but the blank screen doesn't disappear at all.

Actually, I managed to reduce the time that the blank screen appears, because I realize that blank screen is a composition of several blank screens or loading times.
For example, initially it appears during four seconds, but when I apply the solutions...

1) at initialization, hide my webview and visualize a label or layout that simulates an splash screen during the loading time, and swap their visibility status on the Navigated event. Here, I used a webview renderer (android) and added the instance the webViewClient and OnPageStarted and OnPageFinished methods overridden.
2) setting background-color attribute of my components (webview, loading stackyout) and webview body style with the same color (different of white). I also use transparent color.
3) call an asynchronous call of my webview.

...I reduce the blank screen time to 1 second. This time is relative, I am using the android emulator since visual studio 2019 and there are times that my computer has more free memory and the problem disappears. But when the computer is slower, it is easy to see the blank screen.
Now I am using an emulator for a Android 9, mas it should runs since 4.4 to 10. For testing, I run the emulator, four times one by one, in general, and at the third or fourth tentative is possible to have an slower scenario and observe the problem.

All the solutions in the list helped but I still have a brief blank screen appearing. I will be very grateful if anyone has any suggestions.

Answer 1

@Cole Xia (Shanghai Wicresoft Co,.Ltd.) Sorry for answering just now. The blank screen disappears in the real device. Thanks!

Answer 2

Hello,

Welcome to Microsoft Q&A!

The first way you mentioned is pretty nice, you could wrap ActivityIndicator/ProgressBar(and WebView) into a StackLayout , and enable/disable it inNavigating/Navigated event of that Webview.

Xaml

   <StackLayout>  
               <!-- WebView needs to be given height and width request within layouts to render. -->  

               <ProgressBar Progress ="" HorizontalOptions="FillAndExpand" x:Name="progress"/>  
               <WebView x:Name="webView"   
                        HeightRequest="1000"  
                        WidthRequest="1000"    
                        VerticalOptions= "FillAndExpand"   
                        Navigating="webOnNavigating"  
                        Navigated="webOnEndNavigating"/>  
           </StackLayout>  

Code behind

   void webOnNavigating (object sender, WebNavigatingEventArgs e)  
           {  
               progress.IsVisible = true;  

           }  

           void webOnEndNavigating (object sender, WebNavigatedEventArgs e)  
           {  
               progress.IsVisible = false;  
           }  

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.