Xamarin.Forms 之 ListView 設計如何根據紀錄順序為奇數與偶數來顯示適當背景顏色

今天來分享一個Xamarin.Forms 關於使用ListView 控制項來顯示集合紀錄的需求教學，那就是當我們要顯示一群集合資料的時候，需要根據當時紀錄的狀態，變更這筆紀錄的背景顏色又或者根據這筆紀錄是位於奇數列還是在偶數列，需要顯示不同的背景顏色，這樣可以讓整個清單畫面比較好看，而且，使用者也比較容易操作與觀看這些紀錄。

底下螢幕截圖是這篇文章將會做出來的效果，您可以看到，我們將會產生出100 筆的紀錄，這是在Android 平台執行出來的效果，當然，在iOS 平台，出來的畫面也是相同的。您可以看到若這筆紀錄若位於單數列，則這筆紀錄的背景顏色將會為淡藍色，而若這筆紀錄位於偶數列，則這筆紀錄的背景顏色將會為淡綠色，這樣的視覺效果，比起每筆紀錄的背景顏色都是相同或者僅使用紀錄分隔線來呈現的畫面，好看多了，也比較容易選取到。

首先我們來看看這個頁面的XAML 宣告。

在這裡，我們宣告了一個ListView 控制項，我們要顯示的每筆紀錄，使用到的ViewCell，在ViewCell 內，有個 標記，這裡就是每筆紀錄要呈現出來的背景顏色，我們可以看的出來，這個紀錄背景顏色，將會透過資料綁定/繫結Data Binding 的方式，從ViewModel 檢視模型內取得，因此，這個範例的設計技巧就在於說，想要根據當時紀錄的狀態或者記錄位於的奇數列或者偶數列來顯示不同ListView 的紀錄背景顏色，我們只需要在ViewModel 內來變更該屬性值即可。

    <ListView
       HasUnevenRows="True"
       ItemsSource="{Binding MyItemVMList}"
       SeparatorVisibility="None"
       >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <BoxView Color="{Binding CellBackgroundColor}"/>
                        <Label Text="{Binding Name}"
                               FontSize="24"
                               TextColor="Brown"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

現在，讓我們回到了ViewModel 內，對於頁面要顯示的集合資料來源，將會使用MyItemVMList 這個物件內的集合資料，而這個MyItemVMList 是由MyItemVM 類別所組成，所以，首先，我們來看看MyItemVM 類別定義。

這個檢視資料模型僅有兩個屬性，一個是名稱，另外一個就是背景顏色CellBackgroundColor，從這裡您應該發現到了，只要我們設定CellBackgroundColor 成為不同顏色，該筆紀錄的背景顏色，也就會隨之變換。

    public class MyItemVM
    {
        public string Name { get; set; }
        public Xamarin.Forms.Color CellBackgroundColor { get; set; }
    }

底下是我們頁面模型ViewModel 的程式碼，我們在該ViewModel 的建構式內，進行了集合物件MyItemVMList 的紀錄初始化的動作，在這裡，我們會根據這筆紀錄是位於單數還是偶數，設定不同的顏色代碼到CellBackgroundColor 這個屬性中。

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using XFRowColor.Helpers;

namespace XFRowColor.ViewModels
{
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public ObservableCollection<MyItemVM> MyItemVMList { get; set; } = new ObservableCollection<MyItemVM>();
        private readonly INavigationService _navigationService;

        public MainPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;

            for (int i = 0; i < 100; i++)
            {
                var foo = new MyItemVM()
                {
                    Name = $"這是一筆紀錄，編號為 {i}",
                };
                if(i%2==0)
                {
                    foo.CellBackgroundColor = MainHelper.EvenColor;
                }
                else
                {
                    foo.CellBackgroundColor = MainHelper.OddColor;
                }
                MyItemVMList.Add(foo);
            }
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatingTo(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {

        }

    }
}

更多Xamarin.Forms 相關文章

更多關於Xamarin / Xamarin.Forms 教學、技術分享、用法文章，請參考

I ♥ Xamarin