Übung – Konvertieren eines Ereignishandlers in einen Befehl

Tauschen Sie in dieser Übung mit der App "Filmliste" zurück, mit der Sie in der vorherigen Übung gearbeitet haben. Dieses Mal wandeln Sie den Ereignishandler der Wischbewegung zum Löschen in einen Befehl um.

Herunterladen und Ausführen des Beispiels

Dieses Projekt zeigt eine Liste der Filme an. Wenn Sie auf einen Film klicken, navigiert sie zu einer Detailseite mit weiteren Informationen zum Film.

1. Klonen oder Herunterladen des Übungs-Repositorys.
2. Navigieren Sie zum Ordner "part6-übung2 ", und öffnen Sie die MovieCatalog.sln Lösung.
3. 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. Wischen Sie auf einem der aufgelisteten Filme nach links, um die Löschaktion anzuzeigen.

Untersuchen des Codes

Öffnen Sie die MovieCatalog-Lösung , und öffnen Sie die Datei Views\MovieListPage.xaml . Das CollectionView Objekt stellt ein Element für jeden Film in der gebundenen Movies Auflistung dar. Jedes Element verwendet ein SwipeView, um eine Löschaktion durchzuführen.

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="vm:MovieViewModel">
        <SwipeView>
            <SwipeView.RightItems>
                <SwipeItems>
                    <SwipeItem Text="Delete"
                              BackgroundColor="Red"
                              Clicked="MenuItem_Clicked" />
                </SwipeItems>
            </SwipeView.RightItems>
            <VerticalStackLayout Padding="10">
                <Label Text="{Binding Title}" 
                       FontSize="16" />
            </VerticalStackLayout>
        </SwipeView>
    </DataTemplate>
</CollectionView.ItemTemplate>

Wenn auf das Wischelement geklickt wird, wird die MenuItem_Clicked Methode aufgerufen, und der Film wird entfernt. Der Bindungskontext des Wischelements ist der aktuelle Film, die MovieViewModel Klasse. Der Code zum Entfernen eines Films befindet sich jedoch im Haupt-ViewModel MovieListViewModel der App. Der Ereignishandler berücksichtigt diese Tatsache, da er den Bindungskontext des Wischelements abruft und an die Methode des Ansichtsmodells DeleteMovie sendet:

private void MenuItem_Clicked(object sender, EventArgs e)
{
    SwipeItem swipeItem = (SwipeItem)sender;
    ViewModels.MovieViewModel movie = (ViewModels.MovieViewModel)swipeItem.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 Views\MoviesListPage.xaml .

5. Aktualisieren Sie das SwipeItem, um den Command-Parameter an das DeleteMovieCommand zu binden. Übergeben Sie den aktuellen Bindungskontext als CommandParameter.

   <SwipeItem Text="Delete"
              BackgroundColor="Red"
              Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
              CommandParameter="{Binding}" />
   

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

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

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

7. Führen Sie die App aus, und wischen Sie auf einem der Filme nach links. Wählen Sie „Löschen“ bei der Wischgeste aus. Der Film wird aus der Liste gelöscht.