Xamarin表单 - 如何使用标题生成iOS ListView本机分组样式？

Posted 2021-04-25

我已经使用MVVM和绑定在Xamarian Forms中创建了一个listview来创建一个分组列表视图。我希望​​listview具有适用于ios的UITableView Style组。我尝试通过我在网上找到的自定义渲染器来创建它，但结果看起来很糟糕，因为一切都是灰色的。

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

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

我玩弄了背景颜色试图让它们透明，我发现当我制作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表单列表视图看起来像第一个图像，其中单元格是白色并且在该样式组中？

答案

我建议你使用GroupHeaderTemplate而不是Custom Renderers。

您可以自定义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