ios - Xamarin Forms - 如何使用标题制作 iOS ListView native 分组样式？

Question

我已经使用 MVVM 在 Xamarian Forms 中创建了一个 ListView ，并通过绑定(bind)来创建分组 ListView 。我希望​​ ListView 具有适用于 iOS 的 UITableView 样式组。我尝试通过网上找到的自定义渲染器创建它，但结果看起来错误，因为一切都是灰色的。

首先我们将从图像开始。这就是我希望表格看起来像我从 native iOS 版本中获取的:

当我添加自定义渲染器时，我得到 Xamarin 表单版本的以下信息:

我玩弄了背景颜色，试图使它们透明，我发现当我将 ListView 背景颜色=“透明”时，原始 ListView 就在下面。如下两张图所示。

xaml页面如下:

<StackLayout Spacing="0">
    <SearchBar x:Name="SearchBarControl" Text="{Binding SearchText}" SearchCommand="{Binding SearchCommand}" Placeholder="Search"></SearchBar>
    <ListView x:Name="HistoryList" IsGroupingEnabled="True" GroupDisplayBinding="{Binding Title}" ItemsSource="{Binding History}" CachingStrategy="RecycleElement">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding TagContent}" Detail="{Binding DateAndTime}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

我认为应该将其分组的自定义渲染器:

[assembly: ExportRenderer(typeof(ListView), typeof(iOSListViewCustomRenderer))]
namespace Test.iOS.CustomRenderer
{
    public class iOSListViewCustomRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (this.Control != null && e.NewElement != null)
            {
                var tbl = new UITableView(this.Bounds, UITableViewStyle.Grouped)
                {
                    Source = this.Control.Source,
                };

                this.SetNativeControl(tbl);
            }
        }
    }
}

如果有人需要查看其他内容，请告诉我。

我知道表单中的 tableview 控件给了我正确的外观，但它似乎是静态内容，而不是来自 SQL 数据库的动态信息。

我尝试通过制作自定义单元格将单元格设置为白色，但这没有改变任何内容。

如何让 xamarin 表单 ListView 看起来像第一个图像，单元格为白色并位于该样式组中？

Answer 1

我建议您使用GroupHeaderTemplate而不是自定义渲染器。

您可以自定义listView的Group Header，而不是使用普通的样式。

<ListView.GroupHeaderTemplate>
    <DataTemplate>
        <ViewCell Height="50" >
            <ViewCell.View>
                <StackLayout >
                    <Label Text ="{Binding Title}" Margin="15,30,0,5" FontSize="Medium" TextColor="Gray" />
                </StackLayout>
            </ViewCell.View>
        </ViewCell>
    </DataTemplate>
</ListView.GroupHeaderTemplate>

不需要GroupDisplayBinding，并设置HasUnevenRows以启用增加单元格高度。

<ListView x:Name="listView" IsGroupingEnabled="True" HasUnevenRows="True">

详情引用Here