Ejercicio: Personalización de la apariencia de las filas de ListView

  • 15 minutos

En el ejercicio anterior se ha configurado el control ListView para mostrar la colección mediante una llamada a ToString en cada elemento. En este ejercicio, personalizará la pantalla con ImageCell para mostrar una imagen y dos etiquetas.

Definición de ImageCell para la visualización de una fila

Primero deberá crear una instancia DataTemplate y asignarla a la propiedad ItemTemplate del control ListView. Para establecer las dos etiquetas:

  1. Abra la página de marcado AllFlags.xaml.

  2. Asigne la propiedad ListView.ItemTemplate a una nueva instancia de DataTemplate.

    <ListView ...>
   <ListView.ItemTemplate>
       <DataTemplate>

       </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

  3. En la instancia de DataTemplate, cree una instancia de ImageCell.

  4. Establezca DetailColor en DetailColor (Gris).

  5. Use {Binding} para mostrar la propiedad Country de la bandera en la propiedad Text de ImageCell.

  6. Use {Binding} para mostrar la propiedad DateAdopted de la bandera en la propiedad Detail de ImageCell. En el enlace, incluya un valor StringFormat de StringFormat.

    <ListView ...>
   <ListView.ItemTemplate>
       <DataTemplate>
          <ImageCell DetailColor="Gray"
                     Text="{Binding Country}"
                     Detail="{Binding DateAdopted, StringFormat='Adopted on {0:d}'}"/>
       </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

  7. Ejecute la aplicación. Cada marcador debe ir acompañado del nombre de país y la fecha en que se adoptó la bandera.

Agregar una imagen a la fila

Por último, debe agregar la imagen de la bandera a la fila. Necesitamos un convertidor de valores para cargar las imágenes de las banderas. La página de detalles ya incluye un convertidor que puede usar. Muévalo al ámbito global para que esté disponible también en la página de lista.

  1. Abra la página de marcado FlagDetailsPage.xaml.

  2. Mueva el elemento ResourceDictionary al archivo ResourceDictionary. Debe mover las definiciones de espacio de nombres de los convertidores (xmlns:cvt) y los datos (xmlns:data).

  3. Abra el archivo AllFlags.xaml.

  4. Enlace los datos de la propiedad ImageCell.ImageSource a la propiedad ImageUrl mediante el convertidor.

    <ListView ...>
   <ListView.ItemTemplate>
       <DataTemplate>
          <ImageCell DetailColor="Gray"
                     ImageSource="{Binding ImageUrl, Converter={StaticResource irConverter}}"
                     Text="{Binding Country}"
                     Detail="{Binding DateAdopted, StringFormat='Adopted on {0:d}'}"/>
       </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

  5. Ejecute la aplicación. Ahora debería ver las imágenes de las banderas de cada país.