Xamarin.Forms ListView 集合資料多選

這篇文章將會探討如何在 Xamarin.Forms 中，設計原生 ListView 具有多選功能，如同下圖所示。在 Xamarin.Forms 中的 ListView 控制項，本身是沒有預設提供多選功能，僅提供單選並且可以觸發一個點選的事件，不過，若要讓 ListView 具有多選紀錄的功能，我們就需要另外設計一個 UI，當使用者選擇多筆紀錄之後，接著觸發這個 UI，就可以根據剛剛選擇完成的紀錄，進行相關的商業邏輯處理。

因此，在底下的程式碼中，使用者可以點選 ListView 的不同紀錄，一旦點選之後，該紀錄就會被選取到了，並且該紀錄的背景顏色會呈現綠色，代表該紀錄已經被選取了；當然，您也可以再度點選剛剛的紀錄，這筆紀錄就會取消選取，記錄背景顏色就會恢復成為灰色。最後，若多選紀錄操作完成之後，我們可以點選導航工具列的按鈕 結束 這個按鈕，這個時候在 ViewModel 內相對應的 DelegateCommand 委派方法，就會開始計算這次使用者總共點選了幾筆紀錄，並且顯示在螢幕的上方。

本篇文章的專案原始碼位於 XFMulSelLV

建立 ListView 的頁面 View 檢視

• 首先，請打開 MainPage.xaml 檔案，使用底下 XAML 宣告標記替換掉
• 在這個 ListView 控制項中，其實就是一般我們在設計 ListView 所用到的 XAML 語法相同，不過，我們在 ViewCell 中，您會看到有兩個 BoxView 控制項，第一個 BoxView 控制項的顏色是灰色，而第二個 BoxView 控制項的顏色是綠色，同時，我們也看到第二個 BoxView 的 XAML 標記宣告為 <BoxView Color="LightGreen" IsVisible="{Binding IsSelected}"/> ，這表示了，這個 BoxView 是否會顯示出來，將會取決於當時這筆紀錄在 ViewModel 中的 IsSelected 屬性值是否為 True。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Behaviors="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
             xmlns:prism = "clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel= "True"
             x:Class="XFMulSelLV.Views.MainPage"
             Title="集合資料多選">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="結果"
                     Command="{Binding ShowResultCommand}"/>
    </ContentPage.ToolbarItems>

    <Grid>
        <Label Text="{Binding Title}"/>
        <ListView
            Margin="0,20,0,0"
            ItemsSource="{Binding PeopleCollection}"
            SelectedItem="{Binding PersonSelected}"
            HasUnevenRows="True"
            SeparatorVisibility="None"
            >
            <ListView.Behaviors>
                <Behaviors:EventToCommandBehavior
                    EventName="ItemTapped"
                    Command="{Binding PersonTappedCommand}"/>
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <BoxView Color="LightGray"/>
                            <BoxView Color="LightGreen"
                                     IsVisible="{Binding IsSelected}"/>
                            <StackLayout
                                Orientation="Vertical"
                                HorizontalOptions="Fill" VerticalOptions="Start"
                                >
                                <Label
                                    Text="{Binding Name}"
                                    FontSize="30"
                                    />
                                <Label
                                    Text="{Binding Age}"
                                    FontSize="20"
                                    />
                            </StackLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

</ContentPage>

建立 ListView 的頁面 ViewModel 檢視模型

• 首先，請打開 MainPageViewModel.cs 檔案，使用底下 C# 程式碼替換掉
• 我們在這個檔案中，宣告了一個 ListView 的紀錄節點類別，Person，在這個類別中，有著姓名、年紀與是否選取這三個屬性。另外，為了要能夠讓您的選取動作，可以正常更新 IsSelected 屬性，進而使用當時的 IsSelected 值，更新頁面 UI 顯示，這個時候，請記得務必要將 Person 類別，要能夠實作 INotifyPropertyChanged 介面。
• 我們設計頁面 ViewModel 的導航事件 OnNavigatedTo，在這裡進行 ListView 要顯示的記錄之初始化動作，我們在這裡產生出 100 筆的紀錄。
• 我們有在頁面中，使用 ListView.Behaviors 來宣告一個 ListView 的事件，觸發發生後，要執行 ViewModel 中 PersonTappedCommand 命令，而我們在這個 PersonTappedCommand 命令委派方法中，執行這個敘述 PersonSelected.IsSelected = !PersonSelected.IsSelected; ，因此，若這筆紀錄尚未被選取，則 PersonSelected.IsSelected 就是 false，此時，我們將 PersonSelected.IsSelected 的值變更成為 true，因為 PersonSelected.IsSelected 值有變動了，就會觸發 INPC (Notification Property Changed) 的綁定事件，此時，頁面上就會更新 PersonSelected.IsSelected 為 true 的狀態下，將 ViewCell 內的第二個 BoxView 顯示出來。

public class Person : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public string Name { get; set; }
    public int Age { get; set; }
    public bool IsSelected { get; set; }

}

public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
    public event PropertyChangedEventHandler PropertyChanged;
    public ObservableCollection<Person> PeopleCollection { get; set; } = new ObservableCollection<Person>();
    public Person PersonSelected { get; set; }
    public string Title { get; set; } 
    public DelegateCommand PersonTappedCommand { get; set; }
    public DelegateCommand ShowResultCommand { get; set; }
    private readonly INavigationService _navigationService;

    public MainPageViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;
        PersonTappedCommand = new DelegateCommand(() =>
        {
            PersonSelected.IsSelected = !PersonSelected.IsSelected;
        });
        ShowResultCommand = new DelegateCommand(() =>
        {
            var fooCount = 0;
            foreach (var item in PeopleCollection)
            {
                if(item.IsSelected == true)
                {
                    fooCount++;
                }
            }
            Title = $"共選擇 {fooCount} 筆紀錄";
        });
    }

    public void OnNavigatedFrom(NavigationParameters parameters)
    {

    }

    public void OnNavigatingTo(NavigationParameters parameters)
    {

    }

    public void OnNavigatedTo(NavigationParameters parameters)
    {
        PeopleCollection.Clear();
        for (int i = 0; i < 100; i++)
        {
            PeopleCollection.Add(new Person
            {
                Name = $"Name{i}",
                Age = i,
                IsSelected = false
            });
        }
    }

}