Para conseguir el mismo resultado que en articulo Personalizar la apariencia de las celdas del ListView pero usando codigo XAML tendremos que hacer lo siguiente:
|
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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CeldasPersonalizadasXAML;assembly=CeldasPersonalizadasXAML" x:Class="CeldasPersonalizadasXAML.HomePage"> <ListView x:Name="listView" IsVisible="true" ItemsSource="{x:Static local:HomePage.ListaJuegos}" RowHeight="80" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <StackLayout Orientation="Horizontal"> <Image Source="{Binding ImageUri}" WidthRequest="40" HeightRequest="40" /> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> <Label Text="{Binding Titulo}" HorizontalOptions="FillAndExpand" /> <Label Text="{Binding Plataforma}" HorizontalOptions="FillAndExpand"/> </StackLayout> </StackLayout> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> |
De este codigo a continuación vamos a destacar las lineas más importantes.
Lo primero que hacemos es referenciar la pagina donde vamos a tener los datos a mostrar en el listado.
|
1 |
xmlns:local="clr-namespace:CeldasPersonalizadasXAML;assembly=CeldasPersonalizadasXAML" |
Seguimos rellenamos los datos del ListView a partir del listado creado en la variable estática HomePage.ListaJuegos asignandola a ListView.ItemsSource.
|
1 |
ItemsSource="{x:Static local:HomePage.ListaJuegos}" |
Finalmente igual enlazamos las propiedades de la clase Juego con los controles añadidos en la celda
|
1 |
<Image Source="{Binding ImageUri}" WidthRequest="40" HeightRequest="40" /> |
En el proximo artículo explicaremos el funcionamiento de la palabra Binding. Por ahora únicamente destacaramos que es la palabra clave utilizada para enlazar datos entre el codigo C# y codigo XAML.
Podeis descargar el codigo desde Github