Exercício - Gerenciar a seleção usando um viewmodel

Para o nosso exercício, deixamos brevemente o exemplo da aplicação de recursos humanos. Em vez disso, trabalhamos com um aplicativo que lista filmes. O aplicativo já tem algumas páginas e viewmodels que têm algumas ligações básicas. As duas páginas são uma página de listagem e uma página de detalhes. Modificamos a lógica de seleção para que a página e a CollectionView página de detalhes usem a mesma propriedade viewmodel.

Este módulo utiliza o SDK .NET 10.0. Certifique-se de que tem o .NET 10.0 instalado executando o seguinte comando no terminal de comandos preferido:

dotnet --list-sdks

Saída semelhante ao exemplo a seguir aparece:

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

Certifique-se de que uma versão que começa com 10 está listada. Se não aparecer nenhum ou se o comando não for encontrado, instale o SDK .NET 10.0 mais recente.

Abra a solução inicial

1. Clonar ou baixar o repositório de exercícios.
2. Navegue até a pasta part4-exercise1 e abra a solução MovieCatalog.sln .
3. Crie e execute o projeto para garantir que ele funcione. Você deve ver uma lista de filmes exibidos na tela. Selecione um dos filmes na lista e o aplicativo navega até uma página de detalhes.

Examinar o código

Reserve alguns minutos para examinar como os modelos de exibição e exibições são estruturados. Se você estiver familiarizado com Extensible Application Markup Language (XAML) e vinculação de dados, tudo deve parecer familiar, mas a estrutura usa o padrão Model-View-ViewModel (MVVM).

Há um MovieListViewModel que serve como o modelo de visualização geral do aplicativo e como o modelo de visualização para o MoviesListPage. Este viewmodel contém uma lista de filmes carregados a partir do modelo, que é um arquivo json incluído no projeto. O outro modelo de visualização é MovieViewModel, e representa um único filme. Ele também serve para dupla função: fornecer dados para as linhas na página de listagem e como o para o BindingContextMovieDetailPage.

Adicionar suporte de seleção

A MoviesListPage é a primeira página mostrada quando o aplicativo é executado. O CollectionView na página está vinculado à coleção de instâncias fornecidas pelo modelo de MovieViewModel exibição geral, MovieListViewModel. Quando você seleciona um dos filmes na exibição, o SelectionChanged evento navega para o MovieDetailPage, passando o BindingContext do item, que é um filme, para o construtor da exibição. O MovieDetailPage define o viewmodel que foi passado como o BindingContext da página.

Em vez disso, vamos atualizar o aplicativo para que o filme selecionado seja lido MovieDetailPage no modelo de visualização geral do aplicativo.

1. Na janela Gerenciador de Soluções , abra o arquivo ViewModels\MovieListViewModel.cs .

2. Adicione o seguinte código à MovieListViewModel classe:

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

3. Em seguida, abra o arquivo Views\MoviesListPage.xaml .

4. Localiza o CollectionView elemento e adiciona o SelectedItem atributo. Também certifique-se de que SelectionMode está definido para Single:

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

   Este atributo vincula o item selecionado da lista à nova propriedade no viewmodel.

5. Abra o arquivo code-behind para a exibição, Views\MoviesListPage.xaml.cs.

6. Localiza o CollectionView_SelectionChanged responsável pelo evento. Substitua-o pelo seguinte código:

   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;
   }
   

   O MovieDetailPage não aceita mais o filme no construtor, em vez disso, o novo construtor lê o viewmodel principal do aplicativo.

7. Abra o arquivo Views\MovieDetailPage.xaml.cs e altere o construtor para o seguinte código:

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

   Esse código define o contexto de vinculação do modo de exibição para o filme selecionado.

8. Execute o aplicativo e verifique se o código funciona como pretendido.