La apariencia de una celda puede ser personalizada haciendo una subclase de la clase ListView y después estableciendo el tipo de esta clase a la propiedad ItemTemplate del ListView.
A continuación vamos a realizar el ejemplo de como mostrar una imagen con dos lineas de texto como se muestra en la imagen.
Para crear esta capa personalizada tenemos que hacer una subclase a partir de ViewCell como veremos a continuación:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
class JuegoItem: ViewCell { public JuegoItem() { var imagen = new Image { HorizontalOptions = LayoutOptions.Start }; imagen.SetBinding(Image.SourceProperty, new Binding("ImageUri")); imagen.WidthRequest = imagen.HeightRequest = 40; var capaNombre = CrearCapaNombre(); var capaVista = new StackLayout { Orientation = StackOrientation.Horizontal, Children = { imagen, capaNombre } }; View = capaVista; } static StackLayout CrearCapaNombre() { var etiquetaNombre = new Label { HorizontalOptions = LayoutOptions.FillAndExpand }; etiquetaNombre.SetBinding(Label.TextProperty, "Titulo"); var etiquetaConsola = new Label { HorizontalOptions = LayoutOptions.FillAndExpand, }; etiquetaConsola.SetBinding(Label.TextProperty, "Consola"); var capaNombre = new StackLayout { HorizontalOptions = LayoutOptions.StartAndExpand, Orientation = StackOrientation.Vertical, Children = { etiquetaNombre, etiquetaConsola } }; return capaNombre; } } |
El código anterior realiza las siguientes tareas:
- Añade un control Image y lo enlaza con la propiedad ImageUri del objeto JuegoItem
- Crea una capa StackLayout con orientacion vertical para contener dos controles de etiquetas (Label). Estas etiquetas estan relacionadas para mostrar las propiedades Titulo y Consola del objeto JuegoItem.
- Crea una capa StackLayout que alojará un control Image y un control StackLayout. Esta capa les asignara una orientación horizontal del del StackLayout superior.
Una vez que las celdas personalizadas han sido creadas pueden ser usadas por el control de Lista (ListView) y adaptadas en el DataTemplate como se muestra a continuación:
|
1 2 3 4 5 6 7 8 9 10 |
List<Juego> listaJuegos = Juego.ObtenerListaJuegos(); var listview = new ListView { RowHeight = 80 }; listview.ItemsSource = listaJuegos; listview.ItemTemplate = new DataTemplate(typeof(JuegoCell)); Content = new StackLayout { Children = { listview } }; |
Este sera el resultado que obtendremos en la aplicación.
Puedes acceder al codigo fuente en Github