Esercizio - Convertire un gestore eventi in un comando

  • 10 minuti

In questo esercizio, tornare all'app "elenco film" con cui si è lavorato nell'esercizio precedente. Questa volta si converte il gestore eventi del menu Elimina in un comando.

Scaricare ed eseguire l'esempio

Nota

Se si prevede di eseguire le app .NET MAUI ed effettuarne il debug in Android da Windows, è consigliabile clonare o scaricare il contenuto dell'esercizio in un percorso di cartella breve, come ad esempio C:\dev\, per evitare che il percorso dei file generati dalla compilazione superi la lunghezza massima consentita.

Questo progetto visualizza un elenco di film. Facendo clic su un filmato si passa a una pagina di dettaglio con altre informazioni sul film.

  1. Clonare o scaricare il repository dell'esercizio.
  2. Passare alla cartella part6-exercise2 e aprire la soluzione MovieCatalog.sln.
  3. Compilare ed eseguire il progetto per assicurarsi che funzioni. Quando viene visualizzata la schermata, verrà visualizzato un elenco di filmati. Fare clic con il pulsante destro del mouse su uno dei filmati elencati e l'app passa a una pagina di dettaglio.

Esaminare il codice

Aprire la soluzione MovieCatalog e aprire il file Views\MovieListPage.xaml. ListView presenta un elemento per ogni filmato nella raccolta di Movies associata. Ogni elemento definisce un menu di scelta rapida per eliminare un filmato:

<ListView.ItemTemplate>
    <DataTemplate>
        <TextCell Text="{Binding Title}" x:DataType="vm:MovieViewModel">
            <TextCell.ContextActions>
                <MenuItem Text="Delete" IsDestructive="True" Clicked="MenuItem_Clicked" />
            </TextCell.ContextActions>
        </TextCell>
    </DataTemplate>
</ListView.ItemTemplate>

Quando si fa clic sulla voce di menu, il metodo MenuItem_Clicked viene richiamato e il filmato viene rimosso. Il contesto di associazione della voce di menu è il film corrente, la classe MovieViewModel. Ma il codice per la rimozione di un filmato si trova nel modello di visualizzazione principale dell'app MovieListViewModel. Il gestore eventi tiene conto di questo fatto quando ottiene il contesto di associazione della voce di menu e lo invia al metodo DeleteMovie del modello di visualizzazione:

private void MenuItem_Clicked(object sender, EventArgs e)
{
    MenuItem menuItem = (MenuItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)menuItem.BindingContext;
    App.MainViewModel.DeleteMovie(movie);
}

Aggiungere un comando

Il primo passaggio per convertire il gestore eventi in un comando consiste nell'aggiungere il comando al modello di visualizzazione. Questo comando accetta un filmato e lo rimuove dalla raccolta.

  1. Nella finestra Esplora soluzioni aprire il file ViewModels\MovieListViewModel.cs.

  2. Aggiungere la proprietà seguente alla classe MovieListViewModel:

    public ICommand DeleteMovieCommand { get; private set; }

  3. Trovare quindi il costruttore MovieListViewModel e creare un'istanza del comando:

    public MovieListViewModel()
{
    Movies = [];
    DeleteMovieCommand = new Command<MovieViewModel>(DeleteMovie);
}

    Il metodo DeleteMovie esiste già e accetta un parametro MovieViewModel. Il comando esegue il wrapping del metodo e lo espone nel modello di visualizzazione.

  4. Aprire il file ViewModels\MoviesListPage.xaml.

  5. Aggiornare MenuItem per l'associazione del parametro Command al DeleteMovieCommand. Passare il contesto di associazione corrente come CommandParameter.

    <MenuItem Text="Delete"
          IsDestructive="True"
          Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
          CommandParameter="{Binding}" />

    Si noti che il gestore eventi Clicked è stato rimosso dal MenuItem.

    Il Source del contesto di associazione è impostato sul modello di visualizzazione principale dell'app, proprio come la pagina stessa. Il contesto di associazione di MenuItem rimane il filmato e viene passato a CommandParameter.

  6. Aprire il file code-behind per la visualizzazione, Views\MoviesListPage.xaml.cs e rimuovere il codice MenuItem_Clicked.

  7. Eseguire l'app e fare clic con il pulsante destro del mouse o premere su uno dei filmati. Selezionare Elimina dal menu di scelta rapida. Il film viene eliminato dall'elenco.