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

Completado

Para nuestro ejercicio, prescindiremos brevemente del ejemplo de la aplicación de recursos humanos En su lugar, trabajaremos con una aplicación que enumera películas. 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.

En este módulo se usa el SDK de .NET 9.0. Asegúrese de que tiene instalado .NET 9.0 mediante la ejecución del siguiente comando en el terminal de comandos que prefiera:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 9. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 9.0.

Abrir la solución de inicio

1. Clone o descargue el repositorio del ejercicio.

   Nota:

   Es mejor clonar o descargar el contenido del ejercicio en una ruta de acceso de carpeta corta, como _C:\dev_, para evitar que los archivos generados por la compilación superen la longitud máxima de la ruta de acceso.

2. Vaya a la carpeta part4-exercise1 y abra la solución MovieCatalog.sln en Visual Studio o la carpeta de Visual Studio Code.

3. Compile y ejecute el proyecto para asegurarse de que funciona. En la pantalla que se muestra, verá una lista de películas. Seleccione una de las películas enumeradas y la aplicación navega a una página de detalles.

Examen del código

Dedique unos minutos a examinar cómo se estructuran los modelos de vista y las vistas. Si está familiarizado con XAML y el enlace de datos, debería resultarle familiar, pero está estructurado con el modelo MVVM.

Hay un elemento MovieListViewModel que realiza una función doble, como modelo de vista general de la aplicación y como modelo de vista para MoviesListPage. Este modelo de vista contiene una lista de películas cargadas desde el modelo, que es un archivo JSON incluido en el proyecto. El otro modelo de vista es MovieViewModel y representa una sola película. 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 MovieDetailPage.

Adición de compatibilidad con la selección

MoviesListPage es la página que se muestra por primera vez cuando se ejecuta la aplicación. El ListView de la página está enlazado a la colección de instancias de MovieViewModel proporcionadas por el modelo de vista general, MovieListViewModel. Al seleccionar una de las películas de la vista, el evento ItemTapped navega a la MovieDetailPage, pasando el BindingContext del elemento, que es una película, al constructor de la vista. El MovieDetailPage establece el modelo de vista que se pasó como el BindingContext de la página.

En su lugar, vamos a actualizar la aplicación para que el MovieDetailPage lea la película seleccionada del modelo de vista de la aplicación general.

1. En la ventana Explorador de soluciones, abra el archivo ViewModels\MovieListViewModel.cs.

2. Agregue el siguiente código a la clase MovieListViewModel:

   private MovieViewModel _selectedMovie;
   
   public MovieViewModel SelectedMovie
   {
       get => _selectedMovie;
       set => SetProperty(ref _selectedMovie, value);
   }
   

3. A continuación, abra el archivo Views\MoviesListPage.xaml.

4. Busque el elemento ListView y agregue el atributo SelectedItem:

   <ListView ItemsSource="{Binding Movies}" SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" Margin ... >
   

   Este atributo enlaza el elemento seleccionado de la lista a la nueva propiedad del modelo de vista.

5. Abra el archivo de código subyacente para la vista, Views\MoviesListPage.xaml.cs.

6. Reemplace el código del controlador de eventos ListView_ItemTapped por el código siguiente:

   private async void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
   {
       await Navigation.PushAsync(new Views.MovieDetailPage());
   }
   

   El MovieDetailPage ya no acepta la película en el constructor; en su lugar, el nuevo constructor lee el modelo de vista principal de la aplicación.

7. Abra el archivo Views\MovieDetailPage.xaml.cs y cambie el constructor al código siguiente:

   public MovieDetailPage()
   {
   	BindingContext = App.MainViewModel.SelectedMovie;
   	InitializeComponent();
   }
   

   Este código establece el contexto de enlace de la vista en la película seleccionada.

8. Ejecute la aplicación y compruebe que el código funciona según lo previsto.