練習 - 將事件處理常式轉換成命令

在此練習中，切換回您在上一個練習中處理過的「電影清單」應用程式。 這次，你要把 刪除 滑動動作的事件處理程式轉換成指令。

下載並執行範例

此專案會顯示電影清單。 按一下電影會前往詳細資料頁面，其中包含影片的相關詳細資訊。

1. 複製或下載 練習存放庫。
2. 流覽至 part6-exercise2 資料夾，然後開啟 MovieCatalog.sln 方案。
3. 建置並執行該專案以確定它能運作。 顯示畫面時，您應該會看到電影清單。 在列表中的電影向左滑動，即可顯示刪除動作。

檢查程式碼

開啟 MovieCatalog 方案，然後開啟 Views\MovieListPage.xaml 檔案。 CollectionView 會呈現繫結 Movies 集合中每個電影的項目。 每個項目使用帶有SwipeView的刪除動作。

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

當點擊滑動項目時， MenuItem_Clicked 該方法會被啟動，電影會被移除。 滑動項目的綁定上下文是當前電影的MovieViewModel類別。 但移除電影的程式碼位於應用程式的主要 ViewModel MovieListViewModel。 事件處理器在取得滑動項目的綁定上下文並傳送到視圖模型 DeleteMovie 的方法時，會考慮此點：

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

新增命令

將事件處理常式轉換成命令的第一步是將命令新增至 viewmodel。 此命令會接受電影，並將其從集合中移除。

1. 在 [ 方案總管] 視窗中，開啟 ViewModels\MovieListViewModel.cs 檔案。

2. 將下列屬性加入至 MovieListViewModel 類別：

   public ICommand DeleteMovieCommand { get; private set; }
   

3. 接下來，尋找 MovieListViewModel 建構函式並將命令具現化：

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

   DeleteMovie 方法已存在並接受 MovieViewModel 參數。 此命令會包裝該方法，並在 viewmodel 上加以公開。

4. 開啟 Views\MoviesListPage.xaml 檔案。

5. 更新 SwipeItem 以將 Command 參數綁定到 DeleteMovieCommand。 以 CommandParameter 的形式傳遞目前的繫結內容。

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

   請注意，已將 Clicked 事件處理常式從 SwipeItem 中移除。

   會將 Source 繫結內容設為應用程式的主要 ViewModel，就像頁面本身一樣。 SwipeItem 的繫結內容仍會是電影，而且會傳遞至 CommandParameter。

6. 開啟用於檢視的後置程式檔案 Views\MoviesListPage.xaml.cs，然後移除 MenuItem_Clicked 代碼。

7. 啟動應用程式，然後向左滑選一部電影。 從滑動動作中選擇 刪除 。 該電影會從清單中刪除。