Ejercicio: administración de la selección con un modelo de vista

  • 10 minutos

Para el ejercicio, se prescindirá brevemente del ejemplo de la aplicación de recursos humanos, y trabajaremos con una aplicación que muestra citas famosas. La aplicación ya cuenta con un par de páginas y modelos de vista que tienen algunos enlaces básicos. Más concretamente, contiene una página de lista y una página de detalles. Se modificará la lógica de selección para que ListView y la página de detalles usen la misma propiedad del modelo de vista.

Abrir la solución de inicio

Abra la solución de inicio desde la carpeta exercise1start de la copia del repositorio del ejercicio que ha clonado o descargado en Visual Studio.

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.

La aplicación mostrará las citas con un archivo de datos XML como almacenamiento de seguridad. Compile y ejecute la aplicación para asegurarse de que funciona antes de realizar cambios.

Examen del código

El proyecto GreatQuotes es la biblioteca común donde reside el código de Xamarin.Forms. Tómese un tiempo para examinar la solución existente y ver cómo están estructurados los modelos de vista y las páginas. Si está familiarizado con XAML y el enlace de datos en Xamarin.Forms, debería resultarle familiar. Pero se estructura con el patrón MVVM.

Hay un elemento MainViewModel que realiza una función doble, como modelo de vista general de la aplicación y como modelo de vista para QuoteListPage. El otro modelo de vista es QuoteViewModel. Esto también tiene una función doble, ya que proporciona datos para las filas de la página de lista y sirve como BindingContext para QuoteDetailPage.

Esta biblioteca también contiene el resto del contenido de Xamarin.Forms: las páginas XAML, los convertidores y las estructuras de datos comunes que usa el paso.

Adición de compatibilidad con la selección

El primer paso consiste en agregar compatibilidad con propiedades para la selección.

  1. Abra el elemento MainViewModel y agregue una nueva propiedad pública de tipo QuoteViewModel que se llama MainViewModel. Use un captador y un establecedor públicos, así como un campo de respaldo.

  2. Asegúrese de implementar la notificación de cambio de propiedad cuando se establezca la nueva propiedad. Como acceso directo, puede usar el método SetPropertyValue desde el modelo de vista base. Este paso establece el campo subyacente y genera una notificación de cambio de propiedad. Tiene este formato:

    SetPropertyValue<T>(ref T field, T newValue);

    QuoteViewModel selectedQuote;
public QuoteViewModel SelectedQuote {
    get {
        return selectedQuote;
    }
    set {
        SetPropertyValue(ref selectedQuote, value);
    }
}

  3. Ahora vamos a usar la propiedad. Abra el archivo QuoteListPage.xaml y busque el elemento . Agregue un nuevo enlace de propiedad para la propiedad SelectedItem a la propiedad del modelo de vista. Use un enlace bidireccional (propiedad Mode). Deje el controlador de eventos ItemTapped en su lugar. Todavía se necesita para controlar la navegación en esta aplicación sencilla. (La mayoría de los marcos MVVM tienen algún tipo de herramienta de navegación para controlarla en el modelo de vista, por lo que también podríamos deshacernos de eso).

    <ListView ItemsSource="{Binding Quotes}"
    SelectedItem="{Binding SelectedQuote, Mode=TwoWay}"
    ItemTapped="OnQuoteSelected">

  4. Después, abra el archivo de código subyacente (QuoteListPage.xaml.cs) y busque el método . Actualmente pasa el elemento pulsado a QuoteDetailPage como parte del constructor. Quite el parámetro de constructor. Ya no lo necesitará, siempre y cuando la segunda página tenga acceso al modelo de vista.

  5. Por último, abra el archivo QuoteDetailPage.xaml.cs y corrija el constructor para que no tome el parámetro. Cambie BindingContext a la propiedad SelectedQuote de MainViewModel. Recuerde que el modelo de vista es un singleton que expone la clase App.

  6. Ejecute la aplicación y asegúrese de que todavía funciona correctamente. Debería navegar y mostrar los detalles de la oferta en la segunda pantalla correctamente. Aun así, en algunas plataformas se produce un error pequeño, pero molesto: Al volver a la pantalla original, el elemento ListView todavía muestra la selección y la celda que ha pulsado aparece resaltada. Vamos a solucionar este problema.

  7. En el constructor QuoteDetailPage, desactive la propiedad SelectedQuote (establézcala en null) después de establecer el elemento BindingContext. Esto borra la selección ListView.

  8. Vuelva a ejecutar la aplicación para comprobar el cambio.