Ejercicio: Representación de una colección con ListView

10 minutos

Todos los ejercicios de este módulo están relacionados con la aplicación FlagFacts creada previamente. A lo largo de este módulo se modifica y se mejora esta aplicación. En este ejercicio vamos a crear un control ListView y a rellenarlo con datos de cadena. También vamos a usar el evento ItemTapped para mostrar una página de detalles.

Abrir la solución de inicio

Clone o descargue el repositorio del ejercicio.

Nota

Si planea ejecutar y depurar las aplicaciones de Xamarin en Android desde Windows, la mejor opción consiste en clonar o descargar el contenido del ejercicio en una ruta de carpeta corta, como C:\dev\, para evitar que los archivos generados por la compilación superen la longitud de ruta máxima.
Abra la carpeta exercise1start.
Abra la solución FlagFacts.sln.

Probar el comportamiento de la aplicación

Ejecute la aplicación en iOS o Android. Dedique unos minutos a explorar la aplicación para familiarizarse con su comportamiento. La aplicación muestra una única bandera, permite editar los detalles de la bandera y alternar entre banderas mediante los botones de la barra de herramientas.

Creación de una página de contenido XAML

Aquí vamos a reemplazar la página de inicio actual por una nueva instancia de ContentPage.

Agregue un nuevo elemento ContentPage de XAML al proyecto ContentPage. Asígnale el nombre AllFlagsPage.
Abra el archivo AllFlagsPage.xaml y establezca la propiedad en "Fun with Flags".
Elimine cualquier interfaz de usuario existente de XAML.
Abra el archivo App.xaml.cs y busque el constructor.
Cree una instancia de la página de contenido AllFlagsPage.
Cree un nuevo elemento NavigationPage (o reutilice el código existente) y pase la instancia AllFlagsPage.
Asigne NavigationPage (que contiene la página AllFlagsPage) a la propiedad MainPage.
Compile y ejecute la aplicación. Debe mostrar una página vacía.

Este es el código del constructor App.xaml.cs:

public App()
{
    DependencyService.Register();

    InitializeComponent();
    MainPage = new NavigationPage(new AllFlagsPage());
}

Agregar ListView

Ahora que ha creado una página de contenido, agregue un control ListView para mostrar las marcas.

Abra AllFlagsPage.xaml.

Agregue un control ListView como etiqueta raíz dentro de la instancia ContentPage.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        Title="Fun with Flags"
        x:Class="FlagFacts.AllFlagsPage">

    <ListView />

</ContentPage>

Abra AllFlagsPage.xaml.cs.
En el constructor, establezca la propiedad BindingContext de la página en FlagFactsViewModel. Puede obtener una instancia del modelo de vista con el método DependencyService.Get<FlagFactsViewModel>().
```
public AllFlagsPage()
{
    BindingContext = DependencyService.Get<FlagDetailsViewModel>();
    ...
}
```
Abra AllFlagsPage.xaml.
Establezca la propiedad ItemSource del control ListView en la colección Flags.
```
<ListView ItemsSource="{Binding Flags}" />
```
Ejecute la aplicación. Debe mostrar una lista de elementos. Cada elemento muestra el nombre de clase FlagData.Flag. Para personalizar la cadena, se debe invalidar el método ToString de la clase Flag.
Abra el archivo Flag.cs del proyecto FlagData. Ahí, reemplace el método ToString. Haga que el método devuelva el valor de la propiedad Country.
```
public override string ToString()
{
    return Country;
}
```
Ejecute la aplicación y compruebe que el control ListView se rellena con el nombre de los países.

Enlazar a SelectedItem

La aplicación ahora muestra un control ListView relleno con el nombre de los países. Vamos a empezar a agregar cierta interactividad al permitir que los usuarios seleccionen un país. Comenzamos por definir un enlace bidireccional a la propiedad CurrentFlag. Este enlace nos permite realizar un seguimiento del país que se ha seleccionado y cambiarlo desde el código.

Agregue un enlace en XAML para la propiedad ListView.SelectedItem a fin de conectarla a la propiedad CurrentFlag. Asegúrese de que está marcado como un enlace bidireccional.

<ListView ItemsSource="{Binding Flags}" SelectedItem="{Binding CurrentFlag, Mode=TwoWay}" />

Navegación a la página de detalles

Por último, vamos a controlar la acción de pulsación y a mostrar una pantalla de detalles.

Suscríbase al evento ItemTapped en el control ListView. Puede suscribirse en XAML o en el código subyacente (si el elemento tiene un nombre).
En el controlador, use la propiedad Navigation de la página para ir a una nueva instancia de la página de detalles. Use el método PushAsync; puede emplear async y await de C# para asegurarse de ver las excepciones.
```
async void OnItemTapped(object sender, ItemTappedEventArgs e)
{
    await this.Navigation.PushAsync(new FlagDetailsPage());
}
```
Ejecute la aplicación. Pulse un elemento para ir a la página de detalles. Cambie la bandera actual de la página de detalles con los botones arriba o abajo. Luego vuelva a ListView y observe que realiza el seguimiento de la selección actual.

Continuar