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

• 10 minutos

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 a ListView e a página de detalhes usem a mesma propriedade viewmodel.

Este módulo usa o SDK do .NET 9.0. Certifique-se de ter o .NET 9.0 instalado executando o seguinte comando em seu terminal de comando preferencial:

dotnet --list-sdks

Uma saída semelhante ao seguinte exemplo aparece:

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

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

Abrir a solução inicial

1. Clone ou baixe o repositório do exercício.

   Observação

   É melhor clonar ou baixar o conteúdo do exercício em um caminho de pasta curto, como _C:\dev_, para evitar que arquivos gerados por build excedam o comprimento máximo do caminho.

2. Navegue até a pasta part4-exercise1 e abra a solução MovieCatalog.sln no Visual Studio ou na pasta no Visual Studio Code.

3. Compile e execute o projeto para verificar se ele funciona. Na tela exibida, você verá uma lista de filmes. Selecione um dos filmes listados e o aplicativo navega 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ê estiver familiarizado com XAML e associação de dados, todos eles devem parecer familiares, mas são estruturados usando o padrão MVVM.

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

A página MoviesListPage é mostrada pela primeira vez quando o aplicativo é executado. A página ListView está associada à coleção de MovieViewModel instâncias fornecidas pelo viewmodel geral, MovieListViewModel. Quando você seleciona um dos filmes na exibição, o evento ItemTapped 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 elemento ListView e adicione o atributo SelectedItem:

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

   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. Substitua o código do manipulador de eventos ListView_ItemTapped pelo seguinte código:

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

   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.