Xamarin.Forms中CollectionView、ListView、TableView选型：书籍内容展示适配

优先选择CollectionView，不推荐使用TableView，原因：

• TableView是为分组表单类场景设计的控件，单行自定义布局灵活性低，多列并排适配成本高，不支持批量绑定列表数据源，后续拓展样式、增加交互的空间很小
• CollectionView是Xamarin.Forms推出的替代ListView的高性能列表控件，原生支持固定表头、自定义Item模板、多列布局，完全匹配你的需求

1. 实现固定常驻表头 #

直接使用CollectionView的Header属性即可，Header区域不会跟随列表内容滚动，直接写死三列对齐的表头布局：

<CollectionView x:Name="BookChapterList">
    <CollectionView.Header>
        <Grid ColumnDefinitions="*,*,*" BackgroundColor="#ECECEC" Padding="10,8">
            <Label Grid.Column="0" Text="Sl No" FontAttributes="Bold"/>
            <Label Grid.Column="1" Text="Chapter" FontAttributes="Bold"/>
            <Label Grid.Column="2" Text="Page No" FontAttributes="Bold"/>
        </Grid>
    </CollectionView.Header>

2. 实现单行多列数据绑定+自定义行背景 #

用Grid定义Item模板的三列布局，和表头列宽对应即可实现对齐的横向并排效果，直接绑定背景色属性即可实现自定义行样式：

<CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="*,*,*" Padding="10,8" BackgroundColor="{Binding RowBackgroundColor}">
                <Label Grid.Column="0" Text="{Binding SlNo}"/>
                <Label Grid.Column="1" Text="{Binding ChapterName}"/>
                <Label Grid.Column="2" Text="{Binding PageNo}"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 数据源绑定参考 #

对应的实体类示例：

public class ChapterItem
{
    public int SlNo { get; set; }
    public string ChapterName { get; set; }
    public int PageNo { get; set; }
    // 行背景色属性，可根据需求赋值实现隔行变色、特殊行高亮等效果
    public Color RowBackgroundColor { get; set; }
}

直接给CollectionView的ItemsSource属性赋值List<ChapterItem>类型的数据源即可完成绑定。

内容的提问来源于stack exchange，提问作者Rauf