Cvičení – převod obslužné rutiny události na příkaz

Dokončeno

V tomto cvičení přehodíte zpět na aplikaci "seznam filmů", se kterou jste pracovali v předchozím cvičení. Tentokrát převedete obslužnou rutinu události akce Delete potažením prstu na příkaz.

Stažení a spuštění ukázky

Poznámka:

Pokud plánujete spouštět a ladit aplikace .NET MAUI na Androidu z Windows, je nejlepší naklonovat nebo stáhnout cvičný obsah do krátké cesty ke složce, například C:\dev\, aby se zabránilo překročení maximální délky cesty vygenerovaných sestavením.

Tento projekt zobrazí seznam filmů. Kliknutím na video přejdete na stránku podrobností s dalšími informacemi o filmu.

1. Naklonujte nebo stáhněte úložiště cvičení.
2. Přejděte do složky part6-exercise2 a otevřete řešení MovieCatalog.sln .
3. Sestavte a spusťte projekt, abyste měli jistotu, že funguje. Po zobrazení obrazovky by se měl zobrazit seznam filmů. Potáhnutím prstem doleva u jednoho z uvedených filmů zobrazte akci odstranění.

Kontrola kódu

Otevřete řešení MovieCatalog a otevřete soubor Views\MovieListPage.xaml. Zobrazí CollectionView položku pro každý film v vázané Movies kolekci. Každá položka používá SwipeView akci odstranění:

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

Po kliknutí MenuItem_Clicked na položku potáhnutí prstem se vyvolá metoda a video se odebere. Kontext vazby pro položku potáhnutí je aktuální film a třída MovieViewModel. Kód pro odebrání videa je ale na hlavním modelu zobrazení MovieListViewModelaplikace . Obslužná rutina události bere v úvahu tento fakt, když získá kontext vazby položky potažení prstem a odešle ho metodě viewmodelu DeleteMovie.

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

Přidání příkazu

Prvním krokem při převodu obslužné rutiny události na příkaz je přidání příkazu do modelu viewmodel. Tento příkaz přijme film a odebere ho z kolekce.

1. V okně Průzkumník řešení otevřete soubor ViewModels\MovieListViewModel.cs.

2. Do třídy MovieListViewModel přidejte následující vlastnost:

   public ICommand DeleteMovieCommand { get; private set; }
   

3. Dále vyhledejte MovieListViewModel konstruktor a vytvořte instanci příkazu:

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

   Metoda DeleteMovie již existuje a přijímá MovieViewModel parametr. Příkaz zabalí danou metodu a zpřístupní ji v modelu viewmodel.

4. Otevřete soubor Views\MoviesListPage.xaml.

5. Aktualizujte SwipeItem k propojení parametru Command s DeleteMovieCommand. Předat aktuální kontext vazby jako CommandParameter.

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

   Všimněte si, že obslužná rutina Clicked události byla odebrána z objektu SwipeItem.

   Kontext Source vazby je nastavený na hlavní model zobrazení aplikace, stejně jako samotná stránka. Kontext vazby SwipeItem zůstává film a je předán do objektu CommandParameter.

6. Otevřete soubor kódu pro zobrazení, Views\MoviesListPage.xaml.cs a odeberte MenuItem_Clicked kód.

7. Spusťte aplikaci a potáhněte prstem doleva na jednom z filmů. V akci potáhnutí prstem vyberte Odstranit . Film se ze seznamu odstraní.