The ListView in Xamarin.Forms has a lot of options, and the ability to use a custom cell is one of the more useful features.
ImageCell:
A TextCell that also includes an image.
For many uses, the built-in cells will be fine. There are some more advanced uses where these may not be fine. As a simple example, I've created a cell with two labels in it and will be placing data in it. The data comes from the Open Weather API. For this example, the two cells will represent the low and high temperature forecast for Knoxville, Tenn., for a 14-day period starting on June 9, 2015.
Figure 1
shows the output in the iPhone simulator.
Figure 2
shows the output in the Genymotion Android emulator.
var wsa = new Data();
var weather = await wsa.GetData("Knoxville, TN");
var cellTemplate = new DataTemplate(typeof(TemperatureCell));
lv.ItemTemplate = cellTemplate;
lv.ItemsSource = weather.list;
protected override void OnStart()
{ }
protected override void OnSleep()
{ }
protected override void OnResume()
{ }
Here's what's happening in the
Listing 1
code:
In the Refreshing event, it's necessary to turn off the refreshing by calling .EndRrefresh.
Selecting a Cell
Displaying data is the first thing a user needs. The next thing is that user must be able to act on that data. This can be performed by tapping/selecting the cell. The tapped event is set up on the ListView. In the method handling the event, the selected row must be unselected. This is handled by setting.SelectedItem to null.
void Lv_ItemTapped (object sender, ItemTappedEventArgs e)
((ListView)sender).SelectedItem = null;
Swipe
Mobile is all about immediate action. There are times when selecting a cell, acting on that selection, and then opening another screen for additional input is a multistep process. There are situations where some options can be made simpler. This can be done via a swipe. With a swipe, a user will swipe the cell and then select one of the options listed. Listing 3 shows two options being created. The sequence is:
var moreAction = new MenuItem { Text = "More" };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
System.Diagnostics.Debug.WriteLine("More Context Action clicked: " + mi.CommandParameter);
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // Red background
deleteAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
deleteAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
System.Diagnostics.Debug.WriteLine("Delete Context Action clicked: " + mi.CommandParameter);
ContextActions.Add (moreAction);
ContextActions.Add (deleteAction);
Headers and Footers
Headers and footers can be set easily in a ListView. This can be done by setting .Header and .Footer properties, as well as being data-bound.
Wrapping Up
The ListView in Xamarin.Forms has a lot of options, and the ability to use a custom cell is one of the more useful features. It allow developers to craft a UI that's optimal for the specific needs of the application. Along with the ability to use a custom cell, the ListView also allows these custom cells to use the standard features of a ListView. Not only has this article looked at using a custom cell, but it has looked at a number of associated features.
Open Weather Map API
Async Operations with Xamarin
Databinding a ListView with Xamarin.Android
UITableView in Xamarin.iOS
Wallace (Wally) B. McClure has authored books on iPhone programming with Mono/Monotouch, Android programming with Mono for Android, application architecture, ADO.NET, SQL Server and AJAX. He's a Microsoft MVP, an ASPInsider and a partner at Scalable Development Inc. He maintains a blog, and can be followed on Twitter.
1105 Media Inc. See our Privacy Policy, Cookie Policy and Terms of Use. CA: Do Not Sell My Personal Info
Problems? Questions? Feedback? E-mail us.
