如何在Xamarin Forms中使用iOS TableView分组样式创建ListView？

Question

我想用iOS UITableView Grouped Style创建一个ListView，如下图所示。我尝试了许多不同的方法：创建一个TableView自定义渲染器，创建一个ViewCell自定义渲染器，创建一个内容视图，但没有任何效果。

Answer 1

如果您只查找表格标题，可以使用TableSection Title来实现：

<TableView>
    <TableRoot>
        <TableSection Title="Keyboards">
            <EntryCell Label="Deault" Placeholder="default" />
            <EntryCell Label="Chat" Placeholder="omg brb ttyl gtg lol" Keyboard="Chat" />
            <EntryCell Label="Email" Placeholder="sales@xamarin.com" Keyboard="Email" />
            <EntryCell Label="Numberic" Placeholder="55" Keyboard="Numeric" />
            <EntryCell Label="Telephone" Placeholder="+1 012 345 6789" Keyboard="Telephone" />
            <EntryCell Label="Text" Placeholder="text" Keyboard="Text" />
            <EntryCell Label="Url" Placeholder="http://developer.xamarin.com" Keyboard="Url" />
        </TableSection>.
        <TableSection Title="States &amp; Colors">
            <EntryCell Label="Colorful" Placeholder="text" LabelColor="Red" />
            <EntryCell Label="Disabled" Placeholder="text" IsEnabled="false" />
            <EntryCell Label="Colorful + Disabled" Placeholder="text" IsEnabled="false" LabelColor="Red" />
        </TableSection>
    </TableRoot>
</TableView>

<强>结果：

或

如果您要查找每个部分的页眉/页脚，可以列出包含在每个表格部分内的视图单元格中的页眉和页脚的视图。

来源：Xamarin TableView Samples

Answer 2

您可以尝试使用ListViewRenderer，在此渲染器中将原生控件更改为具有相同UITableView的新分组样式Source：

public class MyListViewRenderer : ListViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
    {
        base.OnElementChanged(e);

        if (Element != null)
        {
            var groupTable = new UITableView(Control.Frame, UITableViewStyle.Grouped);
            groupTable.Source = Control.Source;

            // Create a new UIRefreshControl for this tableView, then fire the command when it begin refreshing
            var refreshControl = new UIRefreshControl();
            groupTable.RefreshControl = refreshControl;
            refreshControl.AddTarget((sender, args) =>
            {
                ListView listView = Element;
                listView.RefreshCommand.Execute(null);
            }, UIControlEvent.ValueChanged);

            SetNativeControl(groupTable);
        }

    }
}

RefreshCommand在PCL中定义，当任务完成时，我们会将属性IsRefreshing设置为false以停止刷新。所以我们可以在渲染器中捕获它，如：

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    base.OnElementPropertyChanged(sender, e);

    if (Element.IsRefreshing == false)
    {
        Control.RefreshControl.EndRefreshing();
    }
}