Übung – Konvertieren eines Ereignishandlers in einen Befehl

  • 10 Minuten

Tauschen Sie in dieser Übung mit der App "Filmliste" zurück, mit der Sie in der vorherigen Übung gearbeitet haben. Dieses Mal konvertieren Sie den Ereignishandler des Delete-Menüs in einen Befehl.

Herunterladen und Ausführen des Beispiels

  1. Navigieren Sie zum Ordner part6-exercise2, und öffnen Sie die Lösung MovieCatalog.sln in Visual Studio oder den Ordner in Visual Studio Code.
  2. Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass es funktioniert. Auf dem angezeigten Bildschirm wird eine Liste der Filme angezeigt. Klicken Sie mit der rechten Maustaste auf einen der aufgelisteten Filme, und die App navigiert zu einer Detailseite.

Untersuchen des Codes

Öffnen Sie die MovieCatalog-Lösung, und öffnen Sie die Datei Views\MovieListPage.xaml. Das ListView Objekt stellt ein Element für jeden Film in der gebundenen Movies Auflistung dar. Jedes Element definiert ein Kontextmenü zum Löschen eines Films:

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

Wenn auf das Menüelement geklickt wird, wird das MenuItem_Clicked Element aufgerufen, und der Film wird entfernt. Der Bindungskontext des Menüelements ist der aktuelle Film, die MovieViewModel Klasse. Der Code zum Entfernen eines Films befindet sich jedoch im Haupt-ViewModel MovieListViewModel der App. Der Ereignishandler betrachtet dies, da er den Bindungskontext des Menüelements abruft und an die Methode des ViewModels DeleteMovie sendet:

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

Hinzufügen eines -Befehls

Der erste Schritt beim Konvertieren des Ereignishandlers in einen Befehl besteht darin, dem ViewModel den Befehl hinzuzufügen. Dieser Befehl akzeptiert einen Film und entfernt ihn aus der Sammlung.

  1. Öffnen Sie im Projektmappen-Explorer-Fenster die Datei ViewModels\MovieListViewModel.cs.

  2. Fügen Sie der MovieListViewModel-Klasse die folgende Eigenschaft hinzu:

    public ICommand DeleteMovieCommand { get; private set; }

  3. Suchen Sie als Nächstes den MovieListViewModel Konstruktor, und instanziieren Sie den Befehl:

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

    Die DeleteMovie Methode ist bereits vorhanden und akzeptiert einen MovieViewModel Parameter. Der Befehl umschließt diese Methode und macht sie im ViewModel verfügbar.

  4. Öffnen Sie die Datei ViewModels\MoviesListPage.xaml.

  5. Aktualisieren Sie die MenuItem Bindung des Command Parameters an DeleteMovieCommand. Übergeben Sie den aktuellen Bindungskontext als CommandParameter.

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

    Beachten Sie, dass der Clicked Ereignishandler aus dem MenuItem entfernt wurde.

    Source des Bindungskontexts wird auf das Haupt-ViewModel der App festgelegt, genau wie die Seite selbst. Der Bindungskontext des MenuItem bleibt der Film, und das wird an die CommandParameterDatei übergeben.

  6. Öffnen Sie die CodeBehind-Datei für die Ansicht, Views\MoviesListPage.xaml.cs, und entfernen Sie den MenuItem_Clicked Code.

  7. Führen Sie die App aus, und klicken Sie mit der rechten Maustaste, oder drücken Sie einen der Filme, und wählen Sie im Kontextmenü Löschen aus. Der Film wird aus der Liste gelöscht.