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

Concluído

Para o nosso exercício, deixaremos brevemente o exemplo do aplicativo de recursos humanos. Em vez disso, trabalharemos 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. Modificaremos a lógica de seleção para que a página e a ListView 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 no seu terminal de comando preferido:

dotnet --list-sdks

Saída semelhante ao exemplo a seguir aparece:

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

Certifique-se de que 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.

Abra a solução inicial

1. Clone ou baixe o repositório de exercícios.

   Nota

   É melhor clonar ou baixar o conteúdo do exercício para um caminho de pasta curto, como _C:\dev_, para evitar que os arquivos gerados pela compilação 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 a pasta no Visual Studio Code.

3. Crie e execute o projeto para garantir que ele funcione. 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

Reserve alguns minutos para examinar como os modelos de exibição e exibições são estruturados. Se você estiver familiarizado com XAML e vinculação de dados, tudo deve parecer familiar, mas é estruturado usando o padrão 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 BindingContext MovieDetailPage.

Adicionar suporte de seleção

A MoviesListPage é a página que é mostrada pela primeira vez quando o aplicativo é executado. O ListView 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 ItemTapped 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. Localize o ListView elemento e adicione o SelectedItem atributo:

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

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

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

6. Substitua o código do ListView_ItemTapped manipulador de eventos 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 vinculação do modo de exibição para o filme selecionado.

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