Övning – Konvertera en händelsehanterare till ett kommando

  • 10 minuter

I den här övningen växlar du tillbaka till appen "filmlista" som du arbetade med i föregående övning. Den här gången konverterar du ta bort-menyns händelsehanterare till ett kommando.

Ladda ned och kör exemplet

Kommentar

Om du planerar att köra och felsöka .NET MAUI-appar på Android från Windows är det bäst att klona eller ladda ned träningsinnehållet till en kort mappsökväg, till exempel C:\dev\, för att undvika att bygggenererade filer överskrider den maximala sökvägens längd.

Det här projektet visar en lista över filmer. Om du klickar på en film navigerar du till en detaljsida med mer information om filmen.

  1. Klona eller ladda ned övningsrepo.
  2. Gå till mappen part6-exercise2 och öppna MovieCatalog.sln lösning.
  3. Skapa och kör projektet för att se till att det fungerar. När skärmen visas bör du se en lista över filmer. Högerklicka på en av de listade filmerna och appen navigerar till en detaljsida.

Granska koden

Öppna MovieCatalog-lösningen och öppna filen Views\MovieListPage.xaml. Visar ListView ett objekt för varje film i den bundna Movies samlingen. Varje objekt definierar en snabbmeny för att ta bort en film:

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

När menyalternativet klickas MenuItem_Clicked anropas metoden och filmen tas bort. Menyalternativets bindningskontext är den aktuella filmen, MovieViewModel klassen. Men koden för att ta bort en film finns i appens huvudvymodell MovieListViewModel. Händelsehanteraren tar hänsyn till detta eftersom det hämtar menyalternativets bindningskontext och skickar det till viewmodel-metoden DeleteMovie :

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

Lägga till ett kommando

Det första steget när du konverterar händelsehanteraren till ett kommando är att lägga till kommandot i viewmodel. Det här kommandot accepterar en film och tar bort den från samlingen.

  1. Öppna filen ViewModels\MovieListViewModel.cs i Solution Explorer-fönstret.

  2. Lägg till följande egenskap i klassen MovieListViewModel:

    public ICommand DeleteMovieCommand { get; private set; }

  3. Leta sedan upp MovieListViewModel konstruktorn och instansiera kommandot:

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

    Metoden DeleteMovie finns redan och accepterar en MovieViewModel parameter. Kommandot omsluter den metoden och exponerar den i viewmodel.

  4. Öppna filen ViewModels\MoviesListPage.xaml.

  5. MenuItem Uppdatera för att binda parametern Command till DeleteMovieCommand. Skicka den aktuella bindningskontexten CommandParametersom .

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

    Observera att Clicked händelsehanteraren har tagits bort från MenuItem.

    Bindningskontexten Source är inställd på appens huvudvy, precis som själva sidan. Bindningskontexten för MenuItem förblir filmen och skickas CommandParametertill .

  6. Öppna filen bakom koden för vyn Views \MoviesListPage.xaml.cs och ta bort MenuItem_Clicked koden.

  7. Kör appen och högerklicka eller tryck länge på en av filmerna. Välj Ta bort på snabbmenyn. Filmen tas bort från listan.