[Windows Phone] Where to put load data method?

When you build apps for Windows Phone, you inevitably have to load data and show it on the UI.

So what is the best way to load data?

• 1. Approach 1: this.Loaded event handler

  • 1.1. How it works
  • 1.2. How to use it
  • 1.3. Pros
  • 1.4. Cons
  • 1.5. Conclusion

• 2. Approach 2: OnNavigatedTo

  • 2.1. How it works
  • 2.2. How to use it
  • 2.3. Pros
  • 2.4. Cons
  • 2.5. Conclusion

• 3. In short

When you create a new page in Windows Phone, you get a few methods generated for you

This is the constructor. The constructor’s main job is to…construct, that is, to build up the page we want. A basic mistake is that people usually load their data right inside this method.

Suppose you have a lot of data and LoadData takes a while to run. Then your page only appears once the whole constructor has finished running. Which means that going from the old page and tapping into this one, there is a window where the app “freezes” — that is exactly the time needed to run the page constructor.

Windows Phone doesn’t work like HTML: only once everything is ready in RAM does it draw the page on the screen, while HTML draws whatever it already has :3

A lot of people use this approach, because in some videos and most of the official documentation on MSDN, MS teaches you to do it this way ==’

1. Approach 1: this.Loaded event handler

1.1. How it works

The Loaded event fires right after the page’s UI has been drawn on the screen (after construction is finished) and whenever the UI changes (elements are added or removed)

1.2. How to use it

Use it like in the picture above

1.3. Pros

Windows Phone uses a DataBinding mechanism, so the UI updates automatically when the data changes. Just imagine each item appearing in the list one by one, and you being able to interact with them.

This approach does exactly that. Constructing the page is extremely fast, your app won’t freeze, and interaction with the user is guaranteed

1.4. Cons

Whenever the UI changes (elements are added or removed), this method gets called again.

So we cannot guarantee that during the whole interaction on the page, this method is only called once.

Calling the load method many times leads to unwanted outcomes, not to mention the waste of resources and battery. And if loading your data takes a very long time while your data isn’t bound before loading finishes, you get a situation where the page has been drawn but the content is still completely empty. Even though it still responds well, users will think the app is broken and rate it low :3

1.5. Conclusion

If you are sure your page has no elements being added or removed, you can use this method. One small note: bind the data before you start loading it. Binding to a Collection with no items is perfectly fine. (not a null collection, mind you)

If you use this method and run into strange data bugs, consider the case where the event gets called several times

2. Approach 2: OnNavigatedTo

2.1. How it works

OnNavigatedTo is called when a page becomes the active page in the frame. Which means it is called before the loaded event happens. The order is: Constructor => OnNavigatedTo => Loaded

2.2. How to use it

2.3. Pros

OnNavigatedTo has a few parameters related to the page transition. You can use these parameters to decide how the components will be shown on the page

2.4. Cons

The old page freezes before the transition

2.5. Conclusion

Only use this method when the freeze time is negligible. If you load 2 rows of data it’s okay, but for 20000 rows you should use Loaded

3. In short

Depending on the amount of data as well as the timing, use whichever of the two approaches fits