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

10 分鐘

在此練習中，切換回您在上一個練習中處理過的「電影清單」應用程式。這次，您會將 [刪除] 功能表的事件處理常式轉換成命令。

下載並執行範例

瀏覽至 [part6-exercise2] 資料夾，並在 Visual Studio 或 Visual Studio Code 的資料夾中開啟 [MovieCatalog.sln] 解決方案。
建置並執行該專案以確定它能運作。您會在顯示的畫面上看到電影清單。以滑鼠右鍵按一下列出的其中一部電影，應用程式會帶您前往詳細資料頁面。

檢查程式碼

開啟 MovieCatalog 解決方案，然後開啟 Views\MovieListPage.xaml 檔案。 ListView 會呈現繫結 Movies 集合中每個電影的項目。每個項目都會定義可移除電影的捷徑功能表：

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

按一下功能表項目時，會叫用 MenuItem_Clicked，並移除電影。功能表項目的繫結內容是目前的電影，類別為 MovieViewModel。但移除電影的程式碼位於應用程式的主要 ViewModel MovieListViewModel。事件處理常式會將此視為取得功能表項目的繫結內容，並將其傳送至 viewmodel 的 DeleteMovie 方法：

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

新增命令

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

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

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

public ICommand DeleteMovieCommand { get; private set; }

接下來，尋找 MovieListViewModel 建構函式並將命令具現化：
```
public MovieListViewModel()
{
    Movies = [];
    DeleteMovieCommand = new Command<MovieViewModel>(DeleteMovie);
}
```
DeleteMovie 方法已存在並接受 MovieViewModel 參數。此命令會包裝該方法，並在 viewmodel 上加以公開。
開啟 ViewModels\MoviesListPage.xaml 檔案。
更新 MenuItem 以將 Command 參數繫結至 DeleteMovieCommand。以 CommandParameter 的形式傳遞目前的繫結內容。
```
<MenuItem Text="Delete"
          IsDestructive="True"
          Command="{Binding DeleteMovieCommand, Source={x:Static local:App.MainViewModel}}"
          CommandParameter="{Binding}" />
```
請注意，已將 Clicked 事件處理常式從 MenuItem 中移除。

會將 Source 繫結內容設為應用程式的主要 ViewModel，就像頁面本身一樣。 MenuItem 繫結內容仍會是電影，而且會傳遞至 CommandParameter。
開啟檢視的程式碼後置檔案 (Views\MoviesListPage.xaml.cs)，然後移除 MenuItem_Clicked 程式碼。
執行應用程式，並以滑鼠右鍵按一下或長按其中一部電影，即可從捷徑功能表中選取 [刪除]。該電影會從清單中刪除。

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

下載並執行範例

檢查程式碼

新增命令

意見反應