Forum› Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

How to prevent WebView reload after the TabBar change in Xamarin.Forms.Shell app on Android?

PacodosoPacodoso FRUniversity ✭✭✭
in Xamarin.Forms

I work on a Xamarin.Forms.Shell app containing 4 tabs. One of these tabs contains a WebView allowing users to plane an appointment through an URL given by a provider.

The AppShell.xaml looks like this (all the icons are set with FontImageSource):

<TabBar x:Name="appTabBar">
    <ShellContent x:Name="tabBarHome" Title="Home" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
    <ShellContent Title="News" ContentTemplate="{DataTemplate local:NewsPage}" />
    <ShellContent Title="Booking" Route="BookingPage" ContentTemplate="{DataTemplate local:BookingPage}" >
        <ShellContent.Icon>
            <FontImageSource Glyph="{StaticResource FalIconCalendar}" FontFamily="FontAwesomeLight" />
        </ShellContent.Icon>
    </ShellContent>
    <ShellContent Title="About" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</TabBar>

The BookingPage looks like this:

<ContentPage.Content>
    <Grid>                
        <ctrl:CustomWebView x:Name="webView"
                            Source="{Binding UrlBooking}"                                 
                            WidthRequest="1000" HeightRequest="1000"
                            IsVisible="{Binding ShowWebView}">
    </Grid
</ContentPage.Content>

When the BookingPage is displayed the first time, the WebView is loading as expected. However, if the user changes tab and returns to the BookingPage there are 2 behaviors depending to the platform:

  • On iOS, we keep the WebView as it was before to changing tab.
  • On Android, the WebView is reloaded.

I would like to know if there is a way to prevent the WebView reload on Android?

I've already searched on similar topics like https://forums.xamarin.com/discussion/176470/how-to-prevent-webview-reload-after-the-tab-bar-selection but there was no clear answer.

Tagged:

Answers

  • ankushgupta.8980ankushgupta.8980 USMember ✭✭

    You can Bind the webview source OnAppearing() only. Then source will bind when user opens the screen.

  • PacodosoPacodoso FRUniversity ✭✭✭

    @ankushgupta.8980 said:
    You can Bind the webview source OnAppearing() only. Then source will bind when user opens the screen.

    This doesn't change anything: the WebView is still reloaded on Android.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    if the user changes tab and returns to the BookingPage ... On Android, the WebView is reloaded

    When switching to another tab in Shell, the page's OnDisappearing will be called. If you return to the previous page, the OnAppearing method is trigerred, which is the reason to make the webView be reloaded.

    Try creating a custom WebView and make the class a singleon. Then use the singleon webView to test the function.

    public class CustomWebView : WebView
{
    private CustomWebView() { }

    private static CustomWebView instance = null;

    public static CustomWebView Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new CustomWebView();
            }
            return instance;
        }
    }
}
  • PacodosoPacodoso FRUniversity ✭✭✭

    @Jarvan said:

    if the user changes tab and returns to the BookingPage ... On Android, the WebView is reloaded

    When switching to another tab in Shell, the page's OnDisappearing will be called. If you return to the previous page, the OnAppearing method is trigerred, which is the reason to make the webView be reloaded.

    Try creating a custom WebView and make the class a singleon. Then use the singleon webView to test the function.

    public class CustomWebView : WebView
{
    private CustomWebView() { }

    private static CustomWebView instance = null;

    public static CustomWebView Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new CustomWebView();
            }
            return instance;
        }
    }
}

    I'm not sure that it's possible. If I try to do that, I get an exception when I try to display the WebView.

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited November 2020

    I tested the singleon webview class in a shell application, the issue still occurs in Android. I am looking for the cause, and will update it here later.

  • PacodosoPacodoso FRUniversity ✭✭✭

    @Jarvan said:
    I tested the singleon webview class in a shell application, the issue still occurs in Android. I am looking for the cause, and will update it here later.

    How did you did to integrate a singleton WebView class? I've tried but I get an exception, as no public constructor was found...

    I'm not sure that there is a solution for this issue that has already been reported on Github.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    How did you did to integrate a singleton WebView class? I've tried but I get an exception ...

    I add the views in code behind.

    public partial class AboutPage : ContentPage
{
    public AboutPage()
    {
        InitializeComponent();

        var webView = CustomWebView.Instance;
        webView.HeightRequest = 1000;
        webView.Source = ...;

        Content = new StackLayout()
        {
            Children =
            {
                webView
            }
        };
    }
}

    I'm not sure that there is a solution for this issue that has already been reported on Github.

    The user didn't give a feedback to question, you could report a new issue to the product team on github.

Sign In or Register to comment.