Setting Detail of Master Detail page causes flickering

HamsterHamster RSMember ✭✭

Hello!
I'm trying to prevent flickering from happening when I change the Detail in MasterDetailPage.

In the constructor of the page I create all the required pages like so :
aboutPage = new NavigationPage(new Pages.About());

And then in the Clicked event I set the Detail to one of those instances:
Detail = aboutPage;
IsPresented = false;

This results in screen becoming completely white for a second, including the header, before pages show up.

How can I fix or mend this?

Thanks.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Can you provide some screenshots and code to specify your issues?

  • HamsterHamster RSMember ✭✭
    edited April 28

    Sure thing @LandLu !

    This is cleared up code from the app :

    Drawer.xaml :

        <MasterDetailPage.Master>
                <ContentPage Title="Master" Icon="hamburger.png">
                    <!--Padding="10" BackgroundColor="Gray" Title="Master">-->
                    <ContentPage.Content>
                        <ScrollView>
                            <StackLayout BackgroundColor="#EDEDED"> <!--Margin="5,30,5,5"-->                       
                                <Button Text="{Binding Drawer_Settings}" BackgroundColor="#EDEDED" Clicked="btnSettings_Clicked"></Button>
                            </StackLayout>
                        </ScrollView>
                    </ContentPage.Content>
                </ContentPage>
            </MasterDetailPage.Master>
        </MasterDetailPage>
    

    Drawer.xaml.cs :

      public partial class Drawer : MasterDetailPage
        {
            NavigationPage settingsPage;
        NavigationPage mainScreen;
            public Drawer()
            {
                InitializeComponent();
                this.BindingContext = Storage.AppLanguage;
    
                mainScreen = new NavigationPage(new MainPage());
                Detail = mainScreen;
                IsPresented = false;
                settingsPage = new NavigationPage(new Pages.Settings());
            }
    
            private  async void btnSettings_Clicked(object sender, EventArgs e)
            {
                Storage.SyncStorageWithDevice();
    
                IsPresented = false;
    
                await Task.Run(() =>
                {
                    Task.Delay(300).Wait();
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        Detail = settingsPage;
                    });
                });
            }
    
        }
    } 
    

    I delay task by 300ms because otherwise the Flyout drawer "lags" as the new page loads. But even in that case, I can see the page becoming white before the new page loads up.

    It could be useful stating that this project started as a Blank project template.

    Here's what the lag looks like :
    https://drive.google.com/file/d/1MdQyb24J5ddKebZ5CReU4fNONOLW8JFi/view?usp=sharing

    I already tested various options, for example using Page Activator, or running on another thread.

    What am I doing wrong and how can I fix it? We're scheduled to release next month and could use some help with this :)

    Thanks !

    //
    Xamarin 16.0.0.515
    Xamarin Designer 4.17.4.418
    Xamarin Templates 16.1.47
    Xamarin.Android SDK - 9.2.0.5
    Xamarin.IOS and Xamarin.Mac SDK - 12.8.0.0
    XamlCompilation is enabled like so :
    [assembly: XamlCompilation(XamlCompilationOptions.Compile)]

  • LandLuLandLu Member, Xamarin Team Xamurai

    For the Android side, it does show a blank page first then render your destination page. So the template master-detail page will set a delay before displaying the new page:

    Storage.SyncStorageWithDevice();
    Detail = settingsPage;
    if (Device.RuntimePlatform == Device.Android)
                        await Task.Delay(100);
    
    IsPresented = false;
    

    This delay time could be set to a larger value if your destination page has lots of elements to be loaded.

  • HamsterHamster RSMember ✭✭

    Thanks!
    Sadly the result is still affecting the user experience.

    I got some great workaround recommendations via Support ticket.
    One of them is to have only one Detail page and change its content based on what user requests.

    I converted my ContentPages to ContentViews and followed the recommendation.

    This workaround is really fast and snappy with less complex "pages".

    The other workaround was to instantiate new drawer with set Detail. This also works and avoids the white screen, however it's a bit slower compared to using ContentView instances.

    From what I understand, the support member has identified this as a bug as well. If that's the case I hope it will be fixed soon, as content views don't allow usage of built in page layouts, such as Tabbed View.

  • TaylorDTaylorD USMember ✭✭✭

    What version of the Xamarin.Forms NuGet package are you using? This used to be an issue before one of the 3.x updates. Make sure you are updated to the latest version of XF.

  • HamsterHamster RSMember ✭✭

    I have 4.0.0.62955-pre2 installed. It came as default with Visual Studio 2019 installation I believe.

  • ledragonledragon Member ✭✭✭
    edited October 10

    @Hamster Hi there,

    Did you get anywhere towards improving the UI experience for this. I'm experiencing the same issue. My Detail Pages are quite complex and loading is causing jerkiness on navigaton and the white screen to appear

Sign In or Register to comment.