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, Dec 17 '17 at 20:15
When you do `SetNativeControl` all the layout and alignment are your responsibilty. — Rohit Vipin Mathews, Dec 18 '17 at 20:30
@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, Dec 19 '17 at 15:19
@SolidSnake4444 did you find an answer to this? i'm running into the same issues ... — Sebastian Greifeneder, Feb 07 '18 at 21:52
@SebastianGreifeneder Sadly no. I asked on the Xamarin Forums as well with no response.The bounty I set on the question also yielded no new answers. — SolidSnake4444, Feb 07 '18 at 22:36

ColeX · Answer 1 · 2017-12-19T01:24:16.923

1

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

edited Dec 19 '17 at 01:24

answered Dec 18 '17 at 08:19

ColeX

14,062
5
43
240

I would rather have the real iOS native grouped style instead of faking it. Android and UWP can stay the way they are. – SolidSnake4444 Dec 18 '17 at 15:28
Why do you think this is not the native iOS grouping style? Have you had a look at the source code to see how Xamarin Forms implements grouped headers on iOS? – Steve Chadbourne Dec 20 '17 at 23:19
@SteveChadbourne Because in the image under the header 3, you can see it goes back to being the non grouped style being the normal list view. You can't really see it in my first image but the bottom of that list is pure grey. If you have an iPhone open the settings app and scroll around in there. That is the native grouped view I'm taking about. The bottom is grey instead of being a forever list of blank cells. – SolidSnake4444 Dec 21 '17 at 01:50
I think you are talking about a table view not a list view – Steve Chadbourne Dec 21 '17 at 02:03
Anyway, this all depends on how much effort you want to put in to both write and maintain this. You could probably get pretty close with a group header and some styling like this answer provides without having to go down the custom renderer route. – Steve Chadbourne Dec 21 '17 at 02:05
@SteveChadbourne In Xamarin forms it would be a TableView. The tableview is exactly what I'm looking for but it doesn't allow for dynamic content. I was thinking it would be a simple custom renderer however because the Tableview and listview control in Forms uses a UITableView in iOS native, which supports the style I'm talking about with a simple checkbox. That was what I was trying to do with my custom renderer. – SolidSnake4444 Dec 21 '17 at 03:29

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

1 Answers1

Linked