MasterDetail Menu Stutter/Lagging

capitolcapitol Member ✭✭

I have a MasterDetail Menu that when an menu item is selected, it jumps or skips to the page. It is like it tries to slide but doesn't at all. It should be smooth but nothing about it is smooth. Sometimes it will start to slide then jump to close, sometimes it just flicks off the screen.

I'm looking to get that smooth sliding transition that is associated with the MasterDetail Menu.

I've loaded the Hamburger sample from here: Prism Hamburger Menu

This works as it should. Smooth sliding transition.

Here is my code which is near identical, but I am loading a lot more content in the loaded pages:

private async void OnNavigateCommandExecuted()
    {
      var pageToNavigate = SelectedMenuItem.PageName;

      if (pageToNavigate == "LoginPage")
      {
        var action = await _dialogService.DisplayAlertAsync("Log Out", "Are you sure you want to log out?" +
          " You will be required to enter your password on the next login.",
          "Ok", "Cancel");
        if (action)
        {
          ClearAllUserDetails();
          await _navigationService.NavigateAsync("/" + pageToNavigate);
        }
      }
      else
      {
        if (SelectedMenuItem != null)
        {
          var parameters = new NavigationParameters
          {
            { "FilterPath", SelectedMenuItem.Path }
          };

          await _navigationService.NavigateAsync("NavigationPage/" + pageToNavigate, parameters);
        }
        else
        {
          await _navigationService.NavigateAsync("NavigationPage/" + pageToNavigate);
        }
      }
    }

Answers

  • capitolcapitol Member ✭✭

    Anyone?

  • NMackayNMackay GBInsider, University mod

    Generally this suggests your pages are thread blocking when been pushed onto the navigation stack which causes the master detail page to stutter.

    I'd check what your doing in the navigation events of the page viewmodels. Configuring awaiters to run of the UI thread makes a massive difference for example.

  • capitolcapitol Member ✭✭

    @NMackay said:
    Generally this suggests your pages are thread blocking when been pushed onto the navigation stack which causes the master detail page to stutter.

    I'd check what your doing in the navigation events of the page viewmodels. Configuring awaiters to run of the UI thread makes a massive difference for example.

    Thanks for the reply.

    If i empty the navigation events of all content on the page i am transitioning to, i still get the stuttery, laggy response from the menu.

  • RHudsonRHudson CAMember ✭✭✭

    What does ClearAllUserDetails(); do? How long does this take, any unusual async operations in it??

    Did you try adding breakpoints to this function, and your VM constructors and stepping through to see where the bottleneck is?

  • capitolcapitol Member ✭✭

    @RHudson said:
    What does ClearAllUserDetails(); do? How long does this take, any unusual async operations in it??

    Did you try adding breakpoints to this function, and your VM constructors and stepping through to see where the bottleneck is?

    That was probably a bad code example of where this behaviour happens as that method doesn't run 9/10 times and the stutter happens on every item in the master detail menu.

    The code below is more representative:

        private async void NavigateAsync()
        {
          var pageToNavigate = SelectedMenuItem.PageToLoad;
    
          await _navigationService.NavigateAsync("NavigationPage/" + pageToNavigate);
        }
    

    I can't find any bottleneck. It even happens on an empty detail page.

  • capitolcapitol Member ✭✭

    If i put in a delay, it fixes the menu and it slides smoothly, but the detail page still flashes to white before displaying.

    private async void NavigateAsync()
    {
        var pageToNavigate = SelectedMenuItem.PageToLoad;
    
        await Task.Delay(300);
        await _navigationService.NavigateAsync("NavigationPage/" + pageToNavigate);
    }
    
Sign In or Register to comment.