4/25/15

1©   2014  Xamarin.  All   rights  reserved.

4/25/15

2©   2014  Xamarin.  All   rights  reserved.

v

§§§

ItemsSource takes data in the form of an IEnumerable<T>

Each object in the IEnumerable data source becomes a row in the ListView

4/25/15

3©   2014  Xamarin.  All   rights  reserved.

public static class SimpsonFactory{

public static IList<Person> People{ get;  private  set;  }

}

ItemsSource can data bind to a property of a model that exposes an IEnumerable or IList

<ListView x:Name="contactList" ...ItemsSource="{x:Static local:SimpsonFactory.People}"  ...>

contactList.ItemsSource = SimpsonFactory.People;or

4/25/15

4©   2014  Xamarin.  All   rights  reserved.

public static class SimpsonFactory{

public static List<Person> People  {    get;  private  set;  }

}

List<T> doesn't know anything about Xamarin.Forms…

SimpsonFactory.People.Add(new Person { Name = "Mr.  Burns" });

… so this change only happens in the collection .. not the UI!

public static class SimpsonFactory{

public static IList<Person> People {  get; private  set;}

public  SimpsonFactory()  {People  =  new  ObservableCollection<Person>();

}}

4/25/15

5©   2014  Xamarin.  All   rights  reserved.

listView.SelectedItem = SimpsonFactory.People.Last();...

Person  currentPerson =  (Person)  listView.SelectedItem;

<ListView ...SelectedItem="{Binding SelectedPerson,  Mode=TwoWay}">

No need to deal with selection events with this approach, can treat selection as "activation" and place code into your property setters

Can also use data binding to manage selection

<ListView ItemTapped="OnPersonTapped"  ...>

async void OnPersonTapped(object sender, ItemTappedEventArgs e){

Person selection = (Person)  e.Item;await Navigation.PushAsync(new DetailsPage(selection));

}

4/25/15

6©   2014  Xamarin.  All   rights  reserved.

v

v

4/25/15

7©   2014  Xamarin.  All   rights  reserved.

ItemTemplate describes visual representation for each row

ListView uses the DataTemplate definition to create the runtime visualization, once per row in the ItemsSource

<ListView ...><ListView.ItemTemplate>

<DataTemplate>…

</DataTemplate></ListView.ItemTemplate>

</ListView>

contactList.ItemTemplate =new DataTemplate(...);

4/25/15

8©   2014  Xamarin.  All   rights  reserved.

TextCell Text + DetailsEntryCell Editable Text + LabelSwitchCell Switch + LabelImageCell Image + Text + Details

<ListView.ItemTemplate><DataTemplate>

<ImageCell ImageSource="{Binding HeadshotUrl}"Text="{Binding Name}" Detail="{Binding Email}" />

</DataTemplate></ListView.ItemTemplate>

BindingContext for the generated row will be a single item from the ItemsSource

4/25/15

9©   2014  Xamarin.  All   rights  reserved.

<ImageCell ...><ImageCell.ContextActions>

<MenuItem Clicked="OnDelete"          Text="Delete"  IsDestructive="True" />

</ImageCell.ContextActions>          </ImageCell>

Button is rendered with platform "danger" background, on iOS this results in a red button

4/25/15

10©   2014  Xamarin.  All   rights  reserved.

§§§

Images are different sizes and it pushes the text over – no way to control that in the ImageCell, would have to alter the image sizes which might not be possible

<DataTemplate><ViewCell>

<StackLayout Padding="5"><Label Font="20" TextColor="Black" Text="{Binding Name}" /><Label Font="14" TextColor="Blue" Text="{Binding Email}" />

</StackLayout></ViewCell>

</DataTemplate>

BindingContext for the generated row will be a single item from the ItemsSource

4/25/15

11©   2014  Xamarin.  All   rights  reserved.

<ListViewIsGroupingEnabled="True"  ...>

feature is activated by setting the IsGroupingEnabled property

4/25/15

12©   2014  Xamarin.  All   rights  reserved.

Parent GroupParent GroupParent Group #3

Parent Group #n

ChildChild

ChildChildChild #n

ChildChild

ChildChildChild #n

...

public class PersonGroup :  ObservableCollection<Person>{

public string  FirstLetter { get;  set;  }public string  GroupName { get;  set;  }      ...

}

Derive from an existing collection to expose the required IEnumerable

4/25/15

13©   2014  Xamarin.  All   rights  reserved.

§

§

<ListView.GroupHeaderTemplate><DataTemplate>

<TextCell Text="{Binding GroupName}"Detail="{Binding Count, StringFormat='{0} items'}" />

</DataTemplate></ListView.GroupHeaderTemplate>

<ListView ItemsSource="{Binding .}"IsGroupingEnabled="true"GroupShortNameBinding="{Binding FirstLetter}">

String returned from Bindingwill be placed to the right of the ListView, tapping on the string will "jump" to that group

4/25/15

14©   2014  Xamarin.  All   rights  reserved.

4/25/15

15©   2014  Xamarin.  All   rights  reserved.

Summary