Xamarin Forms - How to Make iOS ListView Native Grouped Style With Headers?

Question

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.

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:

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

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.

The xaml page is as follows:

<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.

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.

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?

@RohitVipinMathews What do you mean by that? In the XAML above I've added IsGroupingEnabled="True" GroupDisplayBinding="{Binding Title}". Is that what you are mentioning? It does group them but it is in the normal list form instead of the iOS grouped version. — SolidSnake4444
When you do SetNativeControl all the layout and alignment are your responsibilty. — Rohit Vipin Mathews
@RohitVipinMathews What do you mean by layout and alignment? It's covering the full screen area which is what I believe you mean by layout. It's just (at least it seems this way) not coloring the cells background white. — SolidSnake4444
@SolidSnake4444 did you find an answer to this? i'm running into the same issues ... — Sebastian Greifeneder

ColeX - MSFT ColeX - MSFT · Accepted Answer · 2017-12-18T08:19:25

I suggest you use GroupHeaderTemplate instead of Custom Renderers.

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 is no needed , and set HasUnevenRows to enable increasing the cell height.

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

Detail refer to Here

Xamarin Forms - How to Make iOS ListView Native Grouped Style With Headers?

1 Answers