Xamarin Forms Async Loading of Data

Xamarin supports the async/await model of the .NET framework, which is an awesome capability. Because async/await is supported, it’s possible to use this to load the data in your application on demand. For instance, suppose we had a page with two listviews, such as the following sample page:



	
		
			
				
					
						
							
							
							
						
					
				
			
		
	

	
		
			
				
					
						
							
							
							
						
					
				
			
		
	


Let’s take a second to look at the ListView markup. The ListView renders a custom ViewCell for each item in the list. We can use ViewCell to create a custom UI for each list item, which is provided by the inner StackLayout. The ListView is bound in code (though could be easily bound in the markup) as shown below, each delaying a specific period of time (for the purposes of simulating a network request).

public class Game
{
	public string Name { get; set; }
	public int Score { get; set; }
	public string PlayerImageUrl { get; set; }
}
public class HighScore
{
	public string Name { get; set; }
	public string Level { get; set; }
	public int Score { get; set; }
}

private async void LoadGames()
{
	await Task.Delay (3000);

	//All zeros is used for demoing purposes.
	this.GamesList.ItemsSource = new List {
		new Game { Name = "Paul J.", Score = 5350, PlayerImageUrl = "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=40" },
		new Game { Name = "Peter K.", Score = 3410, PlayerImageUrl = "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=40" },
		new Game { Name = "Bill C.", Score = 960, PlayerImageUrl = "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=40" },
		new Game { Name = "Bobby B.", Score = 3190, PlayerImageUrl = "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=40" },
		new Game { Name = "Amy S.", Score = 5950, PlayerImageUrl = "http://www.gravatar.com/avatar/00000000000000000000000000000000?s=40" }
	};
}

private async void LoadHighScores()
{
	await Task.Delay (5000);

	this.HighScoresList.ItemsSource = new List {
		new HighScore { Name = "Robby10210.", Score = 907409, Level = "Lv. 42" },
		new HighScore { Name = "Peter K.", Score = 891399, Level = "Lv. 41" },
		new HighScore { Name = "Bill C.", Score = 801222, Level = "Lv. 39" },
		new HighScore { Name = "Bobby B.", Score = 681202, Level = "Lv. 34" },
		new HighScore { Name = "Amy S.", Score = 660198, Level = "Lv. 33" }
	};
}

This loads data into the lists after a delay without interruption to the user. A quick demo of the app is illustrated below for your viewing pleasure on Youtube at the URL, taken with Camtasia – a great screen recording tool: http://www.youtube.com/watch?v=3l2B9v2b0gw.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s