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

Para nosso exercício, deixaremos o exemplo do aplicativo de recursos humanos para trás por enquanto. Em vez disso, trabalharemos com um aplicativo que lista filmes. O aplicativo já tem algumas páginas e viewmodels que têm algumas associações básicas. As duas páginas são uma página de lista e uma página de detalhes. Modificaremos a lógica de seleção para que o CollectionView e a página de detalhes usem a mesma propriedade do viewmodel.

Este módulo usa o SDK do .NET 10.0. Verifique se você tem o .NET 10.0 instalado executando o seguinte comando em seu terminal de comando preferencial:

dotnet --list-sdks

Uma saída semelhante ao seguinte exemplo aparece:

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

Verifique se uma versão que começa com 10 está listada. Se nenhum estiver listado ou o comando não for encontrado, instale o SDK do .NET 10.0 mais recente.

Abrir a solução inicial

1. Clone ou baixe o repositório do exercício.
2. Navegue até a pasta part4-exercise1 e abra a solução MovieCatalog.sln.
3. Compile e execute o projeto para verificar se ele funciona. Você deve ver uma lista de filmes exibidos na tela. Selecione um dos filmes na lista e o aplicativo irá navegar até uma página de detalhes.

Examinar o código

Leve alguns minutos para examinar como os viewmodels e exibições são estruturados. Se você já está familiarizado com XAML (Extensible Application Markup Language) e associação de dados, tudo isso deve parecer familiar, mas a estrutura utiliza o padrão MVVM (Model-View-ViewModel).

Há um MovieListViewModel que tem dupla função, como viewmodel geral do aplicativo e como o viewmodel para o MoviesListPage. Esse viewmodel contém uma lista de filmes carregados do modelo, que é um arquivo json incluído no projeto. O outro viewmodel é MovieViewModel, e representa um único filme. Isso também tem dupla função: fornecer dados às linhas na página de lista e como o BindingContext da MovieDetailPage.

Adicionar suporte à seleção

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

Em vez disso, vamos atualizar o aplicativo para que o MovieDetailPage leia o filme selecionado no viewmodel geral do aplicativo.

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

2. Adicione o código a seguir à classe MovieListViewModel:

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

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

4. Localize o CollectionView elemento e adicione o SelectedItem atributo. Verifique também se SelectionMode está definido como Single:

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

   Esse atributo associa o item selecionado da lista à nova propriedade no viewmodel.

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

6. Localize o CollectionView_SelectionChanged manipulador de eventos. 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 associação da exibição para o filme selecionado.

8. Execute o aplicativo e verifique se o código funciona conforme o esperado.