自定義 ListView 儲存格外觀

發行項
09/12/2019

類別 Xamarin.FormsListView 可用來呈現可捲動的清單，這些清單可透過元素的使用 ViewCell 來自定義。元素 ViewCell 可以顯示文字和影像、指出 true/false 狀態，以及接收用戶輸入。

內建單元格

Xamarin.Forms 隨附適用於許多應用程式的內建資料格：

TextCell 控件用於顯示具有詳細數據文字之選擇性第二行的文字。
ImageCell 控件類似於 TextCells，但包含文字左邊的影像。
SwitchCell 控件可用來呈現和擷取開啟/關閉或 true/false 狀態。
EntryCell 控制件可用來呈現使用者可以編輯的文字數據。

SwitchCell和 EntryCell 控件在的內容TableView中較常用。

TextCell

TextCell 是用來顯示文字的儲存格，選擇性地以第二行做為詳細數據文字。下列螢幕快照顯示 TextCell iOS 和 Android 上的專案：

默認 TextCell 範例

TextCells 會在運行時間轉譯為原生控件，因此相較於自定義 ViewCell，效能非常好。 TextCells 是可自定義的，可讓您設定下列屬性：

Text – 第一行顯示的文字，以大字型顯示。
Detail – 以較小的字型顯示於第一行下方的文字。
TextColor – 文字的色彩。
DetailColor – 詳細數據文字的色彩

下列螢幕快照顯示 TextCell 具有自訂色彩屬性的專案：

自定義 TextCell 範例

ImageCell

ImageCell例如 TextCell，可用來顯示文字和次要詳細數據文字，而且使用每個平臺的原生控件提供絕佳的效能。 ImageCellTextCell不同於，它會顯示文字左邊的影像。

下列螢幕快照顯示 ImageCell iOS 和 Android 上的專案： “Default ImageCell 範例”

ImageCell 當您需要以視覺層面顯示數據清單，例如聯繫人或電影清單時，會很有用。 ImageCells 是可自定義的，可讓您設定：

Text – 以大字型顯示在第一行的文字
Detail – 以較小的字型顯示於第一行下方的文字
TextColor – 文字的色彩
DetailColor – 詳細數據文字的色彩
ImageSource – 要顯示在文字旁的影像

下列螢幕快照顯示 ImageCell 具有自訂色彩屬性的專案： “自定義 ImageCell 範例”

自定義儲存格

自定義儲存格可讓您建立內建單元格不支援的儲存格配置。例如，您可能想要呈現具有兩個具有相等權數卷標的單元格。 TextCell會不足，TextCell因為有一個較小的標籤。大部分的數據格自定義都會新增其他唯讀數據（例如其他標籤、影像或其他顯示資訊）。

所有自定義儲存格都必須衍生自 ViewCell，這是所有內建單元格類型所使用的相同基類。

Xamarin.Forms提供控件的ListView快取行為，可改善某些自定義單元格類型的捲動效能。

下列螢幕快照顯示自訂儲存格的範例：

「自定義儲存格範例」

XAML

您可以使用下列 XAML 來建立上一個螢幕快照中顯示的自訂儲存格：

<?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="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

XAML 的運作方式如下：

自定義儲存格巢狀於 DataTemplate內，位於內 ListView.ItemTemplate。這與使用任何內建單元格的程式相同。
ViewCell 是自定義儲存格的類型。專案的子系 DataTemplate 必須是或衍生自類別 ViewCell 。
在內 ViewCell，配置可由任何 Xamarin.Forms 版面配置管理。在此範例中，配置是由管理 StackLayout，可自定義背景色彩。

注意

任何可系結的屬性 StackLayout 都可以系結在自定義單元格內。不過，XAML 範例中不會顯示這項功能。

代碼

您也可以在程式代碼中建立自定義儲存格。首先，必須建立衍生自 ViewCell 的自定義類別：

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

在頁面建構函式中，ListView 的 ItemTemplate 屬性會設定為 DataTemplate 具有指定型別的 CustomCell ：

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

系結內容變更

系結至自定義數據格類型的 BindableProperty 實例時，顯示 BindableProperty 值的 UI 控件應該使用 OnBindingContextChanged 覆寫來設定要在每個單元格中顯示的數據，而不是單元格建構函式，如下列程式代碼範例所示：

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name
    {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age
    {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location
    {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null)
        {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

事件 OnBindingContextChanged 引發時 BindingContextChanged ，將會呼叫覆寫，以響應屬性變更的值 BindingContext 。因此，當變更時 BindingContext ，顯示 BindableProperty 值的UI控制項應該設定其數據。請注意， BindingContext 應該檢查是否有 null 值，因為您可以針對垃圾收集設定 Xamarin.Forms 這個值，這反過來又會導致 OnBindingContextChanged 呼叫覆寫。

或者，UI 控制件可以系結至 BindableProperty 實例以顯示其值，而不需要覆寫 OnBindingContextChanged 方法。

注意

覆寫 OnBindingContextChanged時，請確定呼叫基類的方法，讓已註冊的 OnBindingContextChanged 委派接收 BindingContextChanged 事件。

在 XAML 中，可以將自訂儲存格型態系結至數據，如下列程式代碼範例所示：

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

這會將 Name實例中的 CustomCell 、 Age和 Location 可系結屬性系結至Name基礎集合中每個物件的、 Age和 Location 屬性。

C# 中的對等系結會顯示在下列程式代碼範例中：

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView
{
    ItemsSource = people,
    ItemTemplate = customCell
};

在 iOS 和 Android 上，如果 ListView 正在回收元素，而自定義儲存格使用自定義轉譯器，則自定義轉譯器必須正確實作屬性變更通知。當儲存格重複使用時，當系結內容更新為可用儲存格時，其屬性值將會變更，並 PropertyChanged 引發事件。如需詳細資訊，請參閱自定義 ViewCell。如需儲存格回收的詳細資訊，請參閱快取策略。

共用方式為