Is there a way to speed up XAML Page loading?

I'm writing a Xamarin Forms solution for Android and iOS. The application uses a Master-Detail menu where each menu item is a page to navigate to, very simple. My problems is that when tapping on a menu item the application takes several seconds to create and navigate to the new page. My pages are XAML pages with many combinations of views (stack-layouts, grids, labels, etc). To make the UI responsive I'm using a separate thread to load and switch to the new page while I enable a wait animation. Still, it seems to me that there has to be a better way to navigate to new pages. User should not have to wait a long time to move into a new application screen. Is Xamarin Forms simply slow to load new pages, or Am I doing this incorrectly? Is it better to create all the application's pages during the application startup, or use some other way?

Here is a simplified example of how I'm navigating to new pages:

public async void NavigateTo(MenuItem menu)
    {
        await Task.Yield();

        if (menu == null)
        {
            IsPresented = false;
            return;
        }
        else
        {
            // Switch Page
            menu.BusyLoading = true; // Enable wait animation
            ThreadPool.QueueUserWorkItem (o => LoadPage(menu));
        }            
    }

    /// <summary>
    /// Loads the page. This function takes a long time to load the new page
    /// </summary>
    /// <param name="menu">Menu.</param>
    private void LoadPage(MenuItem menu)
    {
        // Create new content page
        Page displayPage = (Page)Activator.CreateInstance(menu.TargetType /* This is basically my new ContentPage object */);

        Device.BeginInvokeOnMainThread(() =>
            {
                Detail = new NavigationPage(displayPage);

                menu.BusyLoading = false;
                IsPresented = false;
            });
    }

Best Answers

Answers

  • ignacio.salvoignacio.salvo USMember

    I have defined a few user controls in separated XAML files. My content pages which are in XAML as well load these user controls. Maybe this is part of the reason the XAML takes longer to be parsed.

    Thanks for the suggestions. I guess I'll have to re-create these in pure code to test if that speeds up the process. Thanks

  • AnthonyRamirezAnthonyRamirez USUniversity ✭✭✭
    edited August 2015

    What are is the base type for your custom user controls. Can you post an example?

  • ignacio.salvoignacio.salvo USMember

    They are base on ContentView

  • AnthonyRamirezAnthonyRamirez USUniversity ✭✭✭
    edited August 2015

    @ignacio.salvo

    That should be fine...could you post an example of what you are doing?

    How long is "slow" for you

  • ignacio.salvoignacio.salvo USMember

    Anthony, I'm not able to post a sample now, too much code and no time. I decided to use a mix approach using XAML for each general's page layout and add most of the controls using pure code. That seems to work faster, but I have not measure it though.

    The application will be use on a custom Android device. We were testing using a single core ARM CPU, but based on this and other factors we decided to switch to a dual core CPU (not a solution for general distribution though). In average with the initial single core board and just XAML it takes 2 to 4 seconds for a page to appear. I have not tested with the original device again yet.

    However, as @ylemsoul and @FredyWenger commented, it looks like XAML is too slow when executing InitializeComponent()

    Thanks for your help

  • arroyosarroyos MYMember

    @ignacio.salvo.

    i doing my app with full xaml most of the time currently and what i did is to turn off the page navigation animation. in terms of page transition in user eyes , it looks better.

  • alessandrosuppiejalessandrosuppiej ITMember ✭✭

    @ylemsoul said:
    For better UX I would immediately navigate to a new intermediate screen with ActivityIndicator so after clicking it wouldn't feel sluggish.
    But as for the question - XAML loading is slower. XF team works on XamlC that will produce pure code output instead of InitializeComponent() which parses XML.
    Is your construction (Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);) takes several seconds to complete? That's too much, never seen such XAML pages, actually :smile:
    If you can't simplify your XAML then make a pure code-behind version and measure the difference. If it helps then stick with it until XamlC comes out.

    I tryed your solution, navigating to intermediate page.
    The result is a new page..... with freezed activity indicator...... so i think this isn't a good solution.

    The problem is located mostly on Android , while in ios.... it goes like a charm.

  • BoguslawBlonskiBoguslawBlonski PLMember ✭✭✭
    edited February 2017

    I notice one issue:

    I have page with list binded to observable colection.
    A)if Bindding is while navigation, whole page will be shown after binging is finished = slower = list binding blocks navigation
    B)if Bindding is done after PageLoaded = whole page shown and than list appears.

    Only problem here is what is PageLoaded

    A)
    1) Navigate
    3) ObsetrableList = data

    B)
    1) Navigate
    2) Assume that page was load Task.Delay(200); (see it for check out) or send message to page code behind with data.
    3) ObsetrableList = data

    Binding data list in ViewModel while navigation is done block page display until binding is done.

    There is Navigation.PushModalAsync( but waiting for it doesn't mean page was displayed.
    OnAppearing it also don't determine if page was shown.

Sign In or Register to comment.