El control ListView es el responsable de mostrar una colección de objetos en la pantalla. Cada objeto del ListView estará contenido en una única celda. Por defecto un ListView usará la plantilla de un texto de celda (TextCell) para renderizar una simple linea de texto.
En el siguiente código se muestra un pequeño ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var listView = new ListView { RowHeight = 40 }; listView.ItemsSource = new string [] { "Buy pears", "Buy oranges", "Buy mangos", "Buy apples", "Buy bananas" }; Content = new StackLayout { VerticalOptions = LayoutOptions.FillAndExpand, Children = { listView } }; |
Enlazando clases personalizadas con listas
El control ListView como es lógico también puede mostrar objetos personalizados usando la plantilla predefinida TextCell.
El siguiente codigo muestra el codigo de la clase TodoItem
|
1 2 3 4 5 |
public class TodoItem { public string Name { get; set; } public bool Done { get; set; } } |
El control ListView puede ser alimentado a través de la clase anterior como se muestra a continuación:
|
1 2 3 4 5 6 7 8 |
listView.ItemsSource = new TodoItem[] { new TodoItem {Name="comprar pan" }, new TodoItem {Name="comprar manzanas" }, new TodoItem {Name="comprar peras", Done=true }, new TodoItem {Name="comprar azucar" , Done=true }, new TodoItem {Name="completar tutorial" } }; |
La relacion con los datos puede ser creado en orden para establecer que propiedad de TodoItem será mostrada en el ListView.
|
1 2 3 |
// asignamos el tipo de dato que vamos a relacionar con la plantilla listView.ItemTemplate = new DataTemplate(typeof(TextCell)); listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Name"); |
Esto crea un enlace que especifica la ruta a la propiedad TodoItem.Name y mostrar el resultado de la siguiente imagen.
Seleccionando un elemento de la lista
Para responder a la pulsación de pantalla del usuario de una celda en el ListView hay que enlazar el evento ItemSelected como se muestra a continuación:
|
1 2 3 4 |
listView.ItemSelected += async (sender, e) => { await DisplayAlert("Has tocado!", e.SelectedItem + "seleccionado!", "OK"); }; |
El ejemplo completo se puede acceder y descargar desde Github