第十九章：集合视图（十九）

定制单元格
当然，很少有人对应用程序的第一个版本感到满意，也许对于简单的EntryForm程序来说也是如此。 修改后的设计要求可能会从PersonalInformation中消除整数Age属性，并将文本AgeRange属性替换为某些固定范围。 另外两个属性被添加到仅与程序员有关的类中：这些是类型字符串的属性，表示程序员的首选计算机语言和平台，可从语言和平台列表中选择。
这是经过修改的ViewModel类，现在称为ProgrammerInformation：

class ProgrammerInformation : ViewModelBase
{
    string name, emailAddress, phoneNumber, ageRange;
    bool isProgrammer;
    string language, platform;
    public string Name 
    {
        set { SetProperty(ref name, value); }
        get { return name; } 
    }
    public string EmailAddress 
    {
        set { SetProperty(ref emailAddress, value); }
        get { return emailAddress; } 
    }
    public string PhoneNumber 
    {
        set { SetProperty(ref phoneNumber, value); }
        get { return phoneNumber; } 
    }
    public string AgeRange
    {
        set { SetProperty(ref ageRange, value); }
        get { return ageRange; }
    }
    public bool IsProgrammer 
    {
        set { SetProperty(ref isProgrammer, value); }
        get { return isProgrammer; }
    }
    public string Language
    {
        set { SetProperty(ref language, value); }
        get { return language; }
    }
    public string Platform
    {
        set { SetProperty(ref platform, value); }
        get { return platform; }
    }
}

AgeRange，Language和Platform属性似乎非常适合Picker，但在TableView中使用Picker需要Picker成为ViewCell的一部分。我们如何做到这一点？
使用ListView时，创建自定义单元格的最简单方法是在XAML中的DataTemplate中定义ViewCell中的可视树。这种方法很有意义，因为您定义的可视化树可能专门针对ListView中的项目进行了定制，并且可能不会在其他地方重用。
您可以在TableView中使用相同的技术，但使用TableView，您更有可能重用特定类型的交互式单元格。例如，ProgrammerInformation类有三个适用于Picker的属性。这意味着创建一个可以在这里和其他地方使用的cus？tom PickerCell类更有意义。
Xamarin.FormsBook.Toolkit库包含一个派生自ViewCell的PickerCell类，它基本上是一个Picker视图的包装器。该类由XAML文件和代码隐藏文件组成。代码隐藏文件定义了三个由可绑定属性支持的属性：Label（标识单元格，就像EntryCell中的Label属性一样），Title（对应于Picker的Title属性）和SelectedValue，它是在中选择的实际字符串选择器。此外，get-only Items属性公开Picker的Items集合：

namespace Xamarin.FormsBook.Toolkit
{
    [ContentProperty("Items")]
    public partial class PickerCell : ViewCell
    {
        public static readonly BindableProperty LabelProperty =
            BindableProperty.Create(
                "Label", typeof(string), typeof(PickerCell), default(string));
        public static readonly BindableProperty TitleProperty = 
            BindableProperty.Create(
                "Title", typeof(string), typeof(PickerCell), default(string));
        public static readonly BindableProperty SelectedValueProperty =
            BindableProperty.Create(
                "SelectedValue", typeof(string), typeof(PickerCell), null, 
                BindingMode.TwoWay,
                propertyChanged: (sender, oldValue, newValue) =>
                    {
                         PickerCell pickerCell = (PickerCell)sender;
                         if (String.IsNullOrEmpty(newValue))
                         {
                             pickerCell.picker.SelectedIndex = -1;
                         }
                         else
                         {
                             pickerCell.picker.SelectedIndex = 
                                     pickerCell.Items.IndexOf(newValue);
                         }
                });
        public PickerCell()
        {
            InitializeComponent();
        }
        public string Label
        {
            set { SetValue(LabelProperty, value); }
            get { return (string)GetValue(LabelProperty); }
        }
        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
        public string SelectedValue
        {
            get { return (string)GetValue(SelectedValueProperty); }
            set { SetValue(SelectedValueProperty, value); }
        }
        // Items property.
        public IList<string> Items
        {
            get { return picker.Items; }
        }
        void OnPickerSelectedIndexChanged(object sender, EventArgs args)
        {
            if (picker.SelectedIndex == -1)
            {
                SelectedValue = null;
            }
            else
            {
                SelectedValue = Items[picker.SelectedIndex];
            }
        }
    }
}

XAML文件定义了PickerCell的可视树，它只包含一个标识Label和Picker本身。 请注意，XAML文件的根元素是ViewCell，它是PickerCell派生自的类：

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="Xamarin.FormsBook.Toolkit.PickerCell"
          x:Name="cell">
    <ViewCell.View>
        <StackLayout Orientation="Horizontal"
                     BindingContext="{x:Reference cell}"
                     Padding="16, 0">
 
            <Label Text="{Binding Label}"
                   VerticalOptions="Center" />
            <Picker x:Name="picker"
                    Title="{Binding Title}"
                    VerticalOptions="Center"
                    HorizontalOptions="FillAndExpand"
                    SelectedIndexChanged="OnPickerSelectedIndexChanged" />
        </StackLayout>
    </ViewCell.View>
</ViewCell>

StackLayout上设置的Padding值是根据经验选择的，与Xamarin.Forms EntryCell在视觉上一致。
通常，此XAML文件中不需要ViewCell.View属性元素标记，因为View是ViewCell的content属性。但是，代码隐藏文件将PickerCell的content属性定义为Items集合，这意味着content属性不再是View，而ViewCell.View标记是必需的。
XAML文件的根元素具有x：Name属性，该属性为对象提供名称“cell”，StackLayout将其BindingContext设置为该对象，这意味着StackLayout的子节点的BindingContext是PickerCell实例本身。这允许Label和Picker包含对代码隐藏文件中PickerCell定义的Label和Title属性的绑定。
Picker触发在代码隐藏文件中处理的SelectedIndexChanged事件，以便代码隐藏文件可以将Picker的SelectedIndex转换为PickerCell的SelectedValue。
这不是创建自定义PickerCell类的唯一方法。您还可以通过为每个平台定义单独的PickerCellRenderer类来创建它。
ConditionalCells程序中的TableView将此PickerCell用于ProgrammerInformation类中的三个属性，并使用字符串集合初始化每个PickerCell：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ConditionalCells"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="ConditionalCells.ConditionalCellsPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0, 20, 0, 0" />
    </ContentPage.Padding>
    <StackLayout>
        <TableView Intent="Form">
 
            <TableView.BindingContext>
                <local:ProgrammerInformation /> 
            </TableView.BindingContext>
 
            <TableRoot Title="Data Form">
                <TableSection Title="Personal Information">
                    <EntryCell Label="Name:"
                               Text="{Binding Name}"
                               Placeholder="Enter name"
                               Keyboard="Text" />
                    <EntryCell Label="Email:"
                               Text="{Binding EmailAddress}"
                               Placeholder="Enter email address"
                               Keyboard="Email" />
                    <EntryCell Label="Phone:"
                               Text="{Binding PhoneNumber}"
                               Placeholder="Enter phone number"
                               Keyboard="Telephone" />
                    <toolkit:PickerCell Label="Age Range:"
                                        Title="Age Range"
                                        SelectedValue="{Binding AgeRange}">
                        <x:String>10 - 19</x:String>
                        <x:String>20 - 29</x:String>
                        <x:String>30 - 39</x:String>
                        <x:String>40 - 49</x:String>
                        <x:String>50 - 59</x:String>
                        <x:String>60 - 99</x:String>
                    </toolkit:PickerCell>
                    <SwitchCell Text="Are you a programmer?"
 On="{Binding IsProgrammer}" />
                    <toolkit:PickerCell Label="Language:"
                                        Title="Language"
                                        IsEnabled="{Binding IsProgrammer}"
                                        SelectedValue="{Binding Language}">
                        <x:String>C</x:String>
                        <x:String>C++</x:String>
                        <x:String>C#</x:String>
                        <x:String>Objective C</x:String>
                        <x:String>Java</x:String>
                        <x:String>Other</x:String>
                    </toolkit:PickerCell>
                    <toolkit:PickerCell Label="Platform:"
                                        Title="Platform"
                                        IsEnabled="{Binding IsProgrammer}"
                                        SelectedValue="{Binding Platform}">
                        <x:String>iPhone</x:String>
                        <x:String>Android</x:String>
                        <x:String>Windows Phone</x:String>
                        <x:String>Other</x:String>
                    </toolkit:PickerCell>
                </TableSection>
            </TableRoot>
        </TableView>
    </StackLayout>
</ContentPage>

请注意PickerCell的IsEnabled属性如何与平台和语言属性绑定到IsProgrammer属性，这意味着除非打开SwitchCell并且IsProgrammer属性为true，否则应禁用这些单元格。 这就是为什么这个程序被称为ConditionalCells。
但是，它似乎不起作用，因为此屏幕截图验证：

即使IsProgrammer开关关闭，并且最后两个PickerCell元素中的每一个的IsEnabled属性都设置为false，这些元素仍然响应并允许选择值。 此外，PickerCell在Windows 10移动平台上看起来不太好用。
那么让我们尝试另一种方法。