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

Para el ejercicio, se prescinde brevemente del ejemplo de la aplicación de recursos humanos. En su lugar, se trabaja 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 modifica la lógica de selección para que CollectionView y la página de detalles usen la misma propiedad del modelo de vista.

Este módulo usa el SDK de .NET 10.0. Asegúrese de que tiene instalado .NET 10.0 ejecutando el siguiente comando en el terminal de comandos preferido:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

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

Asegúrese de que aparece una versión que comienza por 10. Si no aparece ninguno o no se encuentra el comando, instale el SDK de .NET 10.0 más reciente.

Apertura de la solución de inicio

1. Clone o descargue el repositorio del ejercicio.
2. Vaya a la carpeta part4-exercise1 y abra la solución MovieCatalog.sln .
3. Compile y ejecute el proyecto para asegurarse de que funciona. Debería ver una lista de películas mostradas en la pantalla. Seleccione una de las películas de la lista y la aplicación navegará 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 el lenguaje XAML (XAML) y el enlace de datos, debería parecerle familiar, pero la estructura usa el patrón Modelo-Vista-Modelo de vista (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 CollectionView 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 SelectionChanged 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 CollectionView elemento y agregue el SelectedItem atributo . Asegúrese también de que SelectionMode está establecido en Single:

   <CollectionView ItemsSource="{Binding Movies}" 
                   SelectedItem="{Binding SelectedMovie, Mode=OneWayToSource}" 
                   Margin="10" 
                   SelectionMode="Single"
                   SelectionChanged="CollectionView_SelectionChanged">
   

   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 de la vista Views\MoviesListPage.xaml.cs.

6. Busque el controlador de eventos CollectionView_SelectionChanged. Reemplácelo por el código siguiente:

   private async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
       if (e.CurrentSelection.Count == 0)
           return;
   
       await Navigation.PushAsync(new Views.MovieDetailPage());
   
       // Deselect
       ((CollectionView)sender).SelectedItem = null;
   }
   

   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 por el 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.