在 ListView 中，使用 ContextActions 來實作兩個內容動作

範例原始碼

當我們在進行 Xamarin.Forms 專案開發的時候，ListView 是個相當重要的控制項，因為，他可以顯示一群資料在螢幕上，當集合資料顯示於 ListView 控制項，使用者可以點選任一紀錄，此時，ListView 控制項可以進行相對應的商業邏輯運作處理。另外，有些時候，我們希望能夠在 ListView 上，使用者可以長按紀錄，這個時候，期望會有一個彈出選項來讓使用者進行選擇，這個時候，我們就需要使用 ViewCell 的 ContextActions 功能。

底下截圖是我們實際執行這個範例的結果，當使用者長按任何一筆 ListView 中的紀錄，這個時候，隨著這個 App 所運行的平台不同 (Android / iOS / UWP)，會出現不同的畫面，這裡我們是使用 Android 平台下執行的結果。所以，您會看到下圖右上方，會有兩個選項出現，使用者可以依照當時需求，點選這兩個選項的任何一個。

在這個練習範例中，我們有實作出選項一與選項二這兩個功能，他分別會顯示一個對話窗出來。

 

首先，我們來看看 XAML 的標記語言宣告。

我們在這個 ListView 中，使用了 ViewCell 宣告出每筆紀錄要顯示的內容，現在，我們可以在 ViewCell 控制項內，使用 ViewCell.ContextActions 項目屬性標誌法，來宣告當長按這個紀錄的時候，需要顯示出哪寫選擇項目。從底下的範例中，我們使用 MenuItem 來宣告兩個選項，並且是 CommandParameter 來將使用者點選的紀錄物件，傳遞到 ViewModel 中的 DelegateCommand 中。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XFContextAction.Views.MainPage"
             Title="ListView的ContextActions使用範例">

    <ListView
        x:Name="MyListView"
        ItemsSource="{Binding MyDatasSource}"
        SelectedItem="{Binding MyDataSelected}"
       >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem
                            IsDestructive="True"
                            Text="選項1" Command="{Binding BindingContext.Option1Command, Source={x:Reference MyListView}}"
                            CommandParameter="{Binding .}"/>
                        <MenuItem
                            Text="選項2" Command="{Binding BindingContext.Option2Command, Source={x:Reference MyListView}}"
                            CommandParameter="{Binding .}"/>
                    </ViewCell.ContextActions>
                    <StackLayout>
                        <Label Text="{Binding Title}"
                           FontSize="30"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFContextAction.ViewModels
{
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public ObservableCollection<MyDataItem> MyDatasSource { get; set; } = new ObservableCollection<MyDataItem>();
        public MyDataItem MyDataSelected { get; set; }
        private readonly INavigationService _navigationService;
        public DelegateCommand<MyDataItem> Option1Command { get; set; }
        public DelegateCommand<MyDataItem> Option2Command { get; set; }
        public readonly IPageDialogService _dialogService;
        public MainPageViewModel(INavigationService navigationService, IPageDialogService dialogService)
        {
            _navigationService = navigationService;
            _dialogService = dialogService;

            Option1Command = new DelegateCommand<MyDataItem>(async (x) =>
            {
                await _dialogService.DisplayAlertAsync("你按下了", $"{x.Title} 的第1個 ActionMenu", "OK");
            });

            Option2Command = new DelegateCommand<MyDataItem>(async (x) =>
            {
                await _dialogService.DisplayAlertAsync("你按下了", $"{x.Title} 的第2個 ActionMenu", "OK");
            });
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            for (int i = 0; i < 20; i++)
            {
                MyDatasSource.Add(new MyDataItem()
                {
                    Title = $"主題 ~~{i}~~"
                });
            }
        }

    }

    public class MyDataItem : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public string Title { get; set; }

    }
}