向StackPanel添加按钮，导航到页面时滞后

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

Answer 1

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 ie:

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 eg is being prepared.