L5 Lists

Contents:
1. Intro
2. Data Adapters
3. Xamarin.Forms ListView Class
4. ListView -> List of Strings
5. Selecting Item
6. Bind to Data Model
7. Prettify Data Model
8. Adding Buttons
9. Other Functionalities
10. Optimizing
 Intro
Lists are answer to long list of items (grouping, scrolling, gesture-sensitivity)
Lists @ mobile development = data grid @ web development

Options for creating scrollable lists on each platform:

Xamarin.Forms ListView - ListView is bound to an array or data model.
Android ListView ListView is bound to an array or data model using an
Adapter.
iOS UITableView UITableView is bound to an array or to a data model using
UITableViewSource.

2
 Data Adapters
Android and iOS lists - require separate adapters for data binding
Android - BaseAdapter
iOS - UITableViewSource
Xamarin.Forms - no additional adapter class is needed. Binding:
Directly to a list of Strings using the ItemsSource property with the
default list template, also
To data models and use custom lists with the ListView's built-in
adapter class called ItemTemplate, (configured using the
SetBinding method).

3
 Xamarin.Forms ListView Class
Lists @ Xamarin.Forms - created using the ListView control bound
to an array or data model.
ListView class:
Provides a scrollable, selectable list
List rows are customizable using layouts, images and views
such as buttons
Supports grouping, headers, footers, jump lists, and pull-to-
refresh
Deleting and applying operations to list rows are supported
using Context Actions

4
 Simple population of Lists
var listView = new ListView();
ListView is populated with listView.ItemsSource = new string[]{
data using the ItemsSource "mono",
property (accepts collection "monodroid",
via Ienumerable) "monotouch",
Simplest way without "monorail",
"monodevelop",
binding to populate a
"monotone",
ListView involves using an "monopoly",
array of strings: "monomodal",
"mononucleosis"
};

listView.ItemsSource.Add("monochrome");
5
 Simple population of Lists

By default, ListView will call ToString and display the result in a TextCell for each row
6
 Operations on Lists
ItemsSource is sent to an array therefore content will not update as the
underlying list or array changes.
Use an ObservableCollection - automatically update the list with items: adding,
removing and changing
ObservableCollection is defined in System.Collections.ObjectModel - like List,
except that it can notify ListView of any changes.

ObservableCollection<Employees> employeeList = new

ObservableCollection<Employess>();
listView.ItemsSource = employeeList;

//Mr. Mono will be added to the ListView because it uses an ObservableCollection

employeeList.Add(new Employee(){ DisplayName="Mr. Mono"});
7
 ListView Binding to List of Strings
1. Instantiate a ListView class on your page
2. Point it to a data source using the ItemsSource property (List of Strings)
3. Using the default layout, each item in a ListView will be a single cell
using the TextCell template displaying a single line of text.

class ListViewStrings : ContentPage {

public ListViewStrings() {
ListView listView = new ListView(); // 1.
List<String> items = new List<String>() {"First","Second","Third"}; //2.
listView.ItemsSource = items; // 2.
this.Content = listView;
}
8
ListView Binding to List of Strings

9
 Selecting Item
1. ItemTapped - fires as a motion event when a list row is clicked
listView.ItemTapped += async (sender, e) =>{
await DisplayAlert("Tapped", e.Item.ToString() + " was selected.", "OK");
};

2. ItemSelected - responds to a change in the state of row selection / un-

selection
listView.ItemSelected += async (sender, e) => {
await DisplayAlert("Selected", e.SelectedItem.ToString()+ " was selected.",
"OK");
};

10
Selecting Item - UI

11
 Clearing the Selection
1. ItemTapped
listView.ItemTapped += async (sender, e) =>{
await DisplayAlert("Tapped", e.Item.ToString() + " was selected.", "OK");
((ListView)sender).SelectedItem = null;
};

2. ItemSelected
listView.ItemSelected += async (sender, e) => {
if (e.SelectedItem == null) return;
await DisplayAlert("Selected", e.SelectedItem.ToString()+ " was selected.", "OK");
((ListView)sender).SelectedItem = null;
};
12
 Complete code
class ListViewStrings: ContentPage {
public ListViewStrings() {
var items = new List<String>() {"First","Second","Third"};
var listView = new ListView();
listView.ItemsSource = items;
listView.ItemTapped += async (sender, e) => {
await DisplayAlert("Tapped", e.Item.ToString() + " was selected.", "OK");
((ListView)sender).SelectedItem = null;
};
this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
this.Content = listView;
}
}

13
 Bind to Data Model
ListViews Built-in adapter called ItemTemplate
Steps:
1. Prepare the data model class
2. Assign it to the ListView.ItemsSource property
3. Bind each property of your model to the list using the
ItemTemplate.SetBinding method.

14
 Bind to Data Model
1.
public class ListItem {
public string Title { get; set; }
public string Description { get; set; }
}
2.
listView.ItemsSource = new ListItem [] {
new ListItem {Title = "First", Description="1st item"},
new ListItem {Title = "Second", Description="2nd item"},
new ListItem {Title = "Third", Description="3rd item"}
};
3.
listView.ItemTemplate = new DataTemplate (typeof(TextCell));
listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Title"); 15
 Prettify Data Model
3A.
listView.ItemTemplate.SetBinding(TextCell.DetailProperty, "Description");
3B.
var template = new DataTemplate (typeof(TextCell));
template.SetValue(TextCell.TextColorProperty, Color.Red);
template.SetValue (TextCell.DetailColorProperty, Color.Blue);
listView.ItemTemplate = template;

16
 Handling Data Model

Item selection through the use of data model

listView.ItemTapped += async (sender, e) => {

ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected.", "OK");
((ListView)sender).SelectedItem = null;
};

17
 Adding Image

listView.ItemsSource = new ListItem[] {

new ListItem {Source = "first.png", Title = "First", Description="1st item"},
new ListItem {Source = "second.png", Title = "Second", Description="2nd item"},
new ListItem {Source = "third.png", Title = "Third", Description="3rd item"}
};
listView.ItemTemplate = new DataTemplate(typeof(ImageCell));

listView.ItemTemplate.SetBinding(ImageCell.ImageSourceProperty, "Source");
listView.ItemTemplate.SetBinding(ImageCell.TextProperty, "Title");
18
listView.ItemTemplate.SetBinding(ImageCell.DetailProperty, "Description");
 Adding Buttons
Button Views - added to the custom template
Context Actions - appear when a row is swiped / long-pressed

1. Declare a Button view

2. Add the Button View onto a layout in a custom ViewCell

3. Bind a period (.) to the

buttons
CommandParameterProperty
to retrieve the clicked row

4. Clicked event handling

through CommandParameter

19
 Other Functionalities
1. Grouping headers
IsGroupingEnabled and GroupDisplayBinding properties of a ListView
2. Customizing the Group Header
create your own in to customizing list rows,
using a custom template class that implements a layout and controls
3. Jump List fast scrolling on a long lists
listView.GroupShortNameBinding = new Binding("Key");
4. Automatic scroll ListViews
ScrollView is built-in
5. Pull to refresh
listView.IsPullToRefreshEnabled = true; // email

20
 Optimizing
1. Dont
- use ViewCells custom template with many views
- use images (older devices)
- use layout which requires lots of calculations
- use deeply nested layout hierarchies.
- use specific LayoutOptions
2. Do:
- Use built-in cells: TextCell and ImageCell.
- Use custom template ViewCells only when you have to
- Use small images only when necessary
- Use less elements. E.g. single FormattedString label instead of multiple labels
- Use AbsoluteLayout - no measurements necessary, reduced nesting
- Use Fill as LayoutOptions - cheapest to compute

21
 References
1. https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/
2. Chap 5 @ Cross platform C#and Xamarin.Forms fundamentals
3. https://www.youtube.com/results?search_query=listview+xamarin

22