Minimize data binding lag in WP7 by delaying the load data for the ViewModel Items

In a Model View ViewModel (MVVM) WP7 app, the loading of data for the ViewModel items usually gets executed in the page “Loaded” event. When the ViewModel Items is huge (list of many items), there is a noticeable lag though, when navigating to the page, and having the page opened. For example, click a link to open a page within your app, and there is about 1-2 seconds delay, before that page is finally opened.

This lag happens because the UI thread is busy trying to bind all that data. The page will only get displayed once the data binding is done. The larger your list, the more noticeable the lag. In this scenario, you can minimize the lag, by delaying the load data for the ViewModel Items, until after the page gets displayed. This way, it will make your app look more responsive, as the page is loaded fast after you navigate to it, even if the page that gets loaded does not show any data yet.
 

Lets look at the default DataBound Application when you start a new project. You can see that the “LoadData” function is called in the “MainPage_Loaded” method.

// Load data for the ViewModel Items
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   if (!App.ViewModel.IsDataLoaded)
   {
      App.ViewModel.LoadData();
   }
}

 

The idea here is to wait for a short period, to give the page time to display (without any data though), before we do the “LoadData” function. You can do this by modifying the code, so that it looks like this.

// Load data for the ViewModel Items
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   // delay the load data so that page/animation can complete smoothly
   Thread t = new Thread(unused => delayedLoadData(1000));
   t.Start();
}
 
// delay the load data by a few ms (background run))
private void delayedLoadData(int delay)
{
   System.Threading.Thread.Sleep(delay);
 
   // marshal back background thread to UI thread
   Deployment.Current.Dispatcher.BeginInvoke(() =>
   {
      App.ViewModel.LoadData();
   });
}

What this piece of code change does is, upon page load, it runs the “delayedLoadData” in the background, so that it will not hog the UI thread. This “delayedLoadData” method, which is now running in the background, takes in a parameter 1000 (1 second), and waits for this 1 second to complete, before running the “LoadData” function back in the UI thread. The 1 second delay, should give enough time for your page to get displayed without any data, or if you are using the silverlight toolkit animation, enough time for the animation to complete. The “LoadData” function should then kick in after the short delay. Even if there is now a 1-2 second lag before the data is eventually displayed, the user should not notice any lag, since your page is already displayed (with animations running smoothly even). This indeed gives your app a more responsive feel to it. Adjust the time to delay according to the complexity of your ViewModel items.

You can leave a response, or trackback from your own site.

Leave a Reply


+ three = 11