Adding buttons to StackPanel, lag when navigating to page

Question

If I'm adding buttons to a StackPanel, when exactly should I run the following code? As it stands just now it's in my OnNavigatedTo function. I'm having to declare that with the "async" property as I've got some code to fetch records from a SQLite DB.

The problem is that when I access this "view record" page, I can see the buttons being drawn one by one (so it takes only a second but there is a definite lag, there's no buttons, then one, then two, then three etc.), the display doesn't appear with the buttons already present, they are added one at a time and it's pretty obvious (this is when using the emulator and an actual device). I wondered if I was just mis-using the OnNavigatedTo event and should be running this code earlier?

I did try doing most of it in the constructor but for some reason I couldn't access the NavgiationContext object (I think that's what it was), for getting the record id from the query string, and I don't think I can declare the constructor with the aysnc property. I think maybe running my code before the initializeComponent() method is called in the constructor could work?

            // Add ButtonStackPanel
            StackPanel ButtonStackPanel = new StackPanel();
            ButtonStackPanel.Name = "ButtonStackPanel";
            MainStackPanel.Children.Insert(2, ButtonStackPanel);


            // Add Buttons
            while (await statement.StepAsync())
            {
              Button button = new Button();

              button.Click += this.disease_Click;
              button.Content = Names[statement.GetTextAt(0)];
              button.FontSize = 28;
              button.Height = 80;

              ButtonStackPanel.Children.Add(button);
            }

Just looking for some general advice in terms of the order of doing things and if it's alright to have the bulk of my code in the OnNavigatedTo event method.

Thanks

Mark · Answer 1 · 2013-11-05T17:38:45.760

Currently you add your StackPanel containing all the buttons before adding the buttons to the StackPanel. So you could bring the lag away from seeing each button drawn individually by putting that call after the loop:

// Add ButtonStackPanel
StackPanel ButtonStackPanel = new StackPanel();
ButtonStackPanel.Name = "ButtonStackPanel";

// Add Buttons
while (await statement.StepAsync())
{
    Button button = new Button();

    button.Click += this.disease_Click;
    button.Content = Names[statement.GetTextAt(0)];
    button.FontSize = 28;
    button.Height = 80;

    ButtonStackPanel.Children.Add(button);
}

MainStackPanel.Children.Insert(2, ButtonStackPanel);

If this takes too long consider adding a loading animation first then remove it before you add the StackPanel with the buttons.

Loading data in the step before is always tricky, you end up pulling logic apart into multiple classes which can turn out to be a nightmare to maintain. Another option would be to show a loading animation i.e.:

var progressBar = new ProgressBar() { IsIndeterminate = true };

MainStackPanel.Children.Insert(1, progressBar);
var stackPanel = new StackPanel();

// ...

MainStackPanel.Children.Remove(progressBar);
MainStackPanel.Children.Insert(1, stackPanel);

That way your user will now that something is still going on e.g. is being prepared.

Thanks for your answer, it's an improvement, but intitally the ButtonStackPanel isn't there, there's a delay before it's displayed, but all the buttons appear at the same time now since they've already been added to the StackPanel. — user2950076, Nov 05 '13 at 17:27
What about trying to do the work before the OnNavigatedTo event is fired? — user2950076, Nov 05 '13 at 17:28
@user2950076 see my updated answer, in general it will be a better user experience when indicating loading or background work still in progress to the user with a loading animation. — Mark, Nov 05 '13 at 17:40

Adding buttons to StackPanel, lag when navigating to page

1 Answers1