Xamarin forms – UWP fix listview grouped header height problem

When UWP comes into play with Xamarin Forms, you’ll notice that several default control settings are often not resulting in a pleasing UI.

One that caught my eye recently was the way the height is set in a grouped lisview header.
So assume following setup, you define a listview and enable grouping. With that you would like to control what is being shown in the header, so you define your own GroupHeader Template. Inside the template, you only need a small display area, so for demo purpose we will only enable a Label control, but are setting it’s height to a fix amount of 25!
Complete XAML look like this:

When this is done you’ll get the following layout on iOS ( I added background colours to show off the different templates and their heights ).

So everything is looking ok in reference to what we defined in XAML, but now let’s look at UWP…

Well this is odd! Somehow the height of our headers is larger than what we defined… looks like UWP has some default rendering that overrides what we have set.
So after some digging through the source code of Xamarin forms, I’ve not found any special setting that could trigger this. In other words it’s not something Xamarin does to the UWP rendering of the listview.
This meant I needed to go look at the default template settings of the UWP control itself. What I found was that the listview control has a special header template style defined that uses a specific value for the minimum height for the ListViewHeaderItemMinHeight!
It’s set to 44… this explains our weird look and feel on UWP.

The definition for this style can be found here…

With this in mind it’s actually very easy to fix this in our app. All we need to do is provide a better minimum height value for the given style key.
When using UWP in Xamarin forms, you do this sort of overrides inside your App.xaml file by defining a theme resource dictionary and adding the same key like so:

With this in place our UI will finally look like the same as the iOS counterpart.

As always the example can be found on my github here…