Oefening: een gebeurtenis-handler converteren naar een opdracht

  • 10 minuten

In deze oefening gaat u terug naar de app 'filmlijst' waarmee u in de vorige oefening hebt gewerkt. Deze keer converteert u de gebeurtenis-handler van het menu Verwijderen naar een opdracht.

Het voorbeeld downloaden en uitvoeren

Notitie

Als u van plan bent om uw .NET MAUI-apps op Android vanuit Windows uit te voeren en fouten op te sporen, kunt u de inhoud van de oefening het beste klonen of downloaden naar een kort mappad, zoals C:\dev\, om te voorkomen dat door build gegenereerde bestanden de maximale padlengte overschrijden.

Als u deze oefeningsmodule wilt starten, downloadt u het project Movie List Sample . In dit project wordt een lijst met films weergegeven. Als u op een film klikt, gaat u naar een detailpagina met meer informatie over de film.

  1. Download het voorbeeldproject Filmlijst en pak het uit in een tijdelijke map.
  2. Navigeer naar de map part6-exercise2 en open de MovieCatalog.sln-oplossing .
  3. Bouw het project en voer het uit om ervoor te zorgen dat het werkt. Wanneer het scherm wordt weergegeven, ziet u een lijst met films. Klik met de rechtermuisknop op een van de vermelde films en de app gaat naar een detailpagina.

De code controleren

Open de MovieCatalog-oplossing en open het bestand Views\MovieListPage.xaml . Het ListView bevat een item voor elke film in de gebonden Movies verzameling. Elk item definieert een contextmenu om een film te verwijderen:

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

Wanneer op het menu-item wordt geklikt, wordt de MenuItem_Clicked methode aangeroepen en wordt de film verwijderd. De bindingscontext van het menu-item is de huidige film, de MovieViewModel klasse. Maar de code voor het verwijderen van een film bevindt zich in het hoofdweergavemodel MovieListViewModelvan de app. De gebeurtenishandler beschouwt dit feit omdat deze de bindingscontext van het menu-item krijgt en deze naar de methode van het viewmodel DeleteMovie verzendt:

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

Een opdracht toevoegen

De eerste stap bij het converteren van de gebeurtenis-handler naar een opdracht is het toevoegen van de opdracht aan het viewmodel. Deze opdracht accepteert een film en verwijdert deze uit de verzameling.

  1. Open in het venster Solution Explorer het bestand ViewModels\MovieListViewModel.cs .

  2. Voeg de volgende eigenschap toe aan de klasse MovieListViewModel:

    public ICommand DeleteMovieCommand { get; private set; }

  3. Zoek vervolgens de MovieListViewModel constructor en instantieer de opdracht:

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

    De DeleteMovie methode bestaat al en accepteert een MovieViewModel parameter. Met de opdracht wordt die methode verpakt en weergegeven in het viewmodel.

  4. Open het bestand ViewModels\MoviesListPage.xaml .

  5. Werk de MenuItem parameter bij om de Command parameter aan de DeleteMovieCommandparameter te binden. Geef de huidige bindingscontext door als de CommandParameter.

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

    U ziet dat de Clicked gebeurtenis-handler is verwijderd uit de MenuItem.

    De Source bindingscontext wordt ingesteld op het hoofdweergavemodel van de app, net zoals de pagina zelf. De bindingscontext van de MenuItem film blijft de film en wordt doorgegeven aan de CommandParameter.

  6. Open het code-behind-bestand voor de weergave, Views\MoviesListPage.xaml.cs en verwijder de MenuItem_Clicked code.

  7. Voer de app uit en klik met de rechtermuisknop of druk lang op een van de films. Selecteer Verwijderen in het contextmenu. De film wordt uit de lijst verwijderd.