Xamarin Forms-如何使带有标题的iOS ListView本机分组样式？ [英] Xamarin Forms - How to Make iOS ListView Native Grouped Style With Headers?

问题描述

我已经使用MVVM在Xamarian Forms中创建了一个列表视图并绑定以创建一个分组的列表视图，我希望该列表视图具有适用于iOS的UITableView Style组。我尝试通过在网上找到的自定义渲染器创建此图像，但是由于所有内容都是灰色，因此结果看起来是错误的。

I have created a listview in Xamarian Forms using MVVM and binding to create a grouped listview.I would like the listview to have the UITableView Style group which is for iOS. I tried creating this via a custom renderer which I found online, but the result looks wrong as everything is gray.

首先，我们将从图像开始。这是我希望表格看起来像我从本地iOS版本获得的样子：

First we will start with the images. This is what I want the table to look like whcih I took from the native iOS version:

当我添加自定义渲染器时，将获得Xamarin表单版本的以下内容：

When I add the custom renderer I get the following for the Xamarin forms version:

我在尝试使背景颜色透明的背景色，然后发现当我使listview背景色= Transparent时，原始listview位于。在以下两个图像中显示。

I played around with background colors trying to make them transparent, and I found that when I made the listview background color = "Transparent" that the original listview was under. Shown in the following two images.

< a href = https://i.stack.imgur.com/W6KUs.png rel = nofollow noreferrer>

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>

我认为应该对自定义渲染器进行分组：

The custom renderer that I believe should make it grouped:

[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);
            }
        }
    }
}

如果任何人都需要查看其他内容，请让我知道。

If anyone needs to see anything else, let me know.

我知道表单中的tableview控件可以使我看起来正确，但它似乎是静态内容，而不是动态信息一个SQL数据库。

I know the tableview control in forms gives me the proper look but it seems to be static content and not dynamic info from a SQL database.

我尝试通过制作一个自定义单元格使单元格变白，但这没有任何改变。

I tried making the cells white by making a custom cell but that didn't change anything.

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

How can I get the xamarin forms list view to look like the first image with the cells being white and be in that styled group?

推荐答案

我建议您使用 GroupHeaderTemplate 代替 Custom Renderers 。

您可以自定义listView的组标题，而不是使用常规样式。

You can custom Group Header of listView instead of using the normal style.

<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 以启用增加单元格高度的功能。

GroupDisplayBinding is no needed , and set HasUnevenRows to enable increasing the cell height.

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

详细信息请参考在这里

这篇关于Xamarin Forms-如何使带有标题的iOS ListView本机分组样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！