How to implement ListView HeaderTemplate?

[Joon]

Hi all,
It's a popular topic how in Xamarin Forms we need to avoid listview in a scroll view. It's often required to stack something above a listview and scroll all together. Xamarin's solution for this is to come up with the Header and Footer template so that you don't have to place your ListView within a scrollview.
I don't think there's HeaderTeamplate in Telerik Xamarin Forms Listview nor I couldn't figure out a workaround.
If it's not available in the XF layer, then I wouldn't mind doing a custom renderer to insert a header view within the Telerik ListView.
Anyone could guide me how I could achieve this?

Thanks heaps!

Regards,

John Choi

[Joon]

Any help on this please?

[Rosy Topchiyska]

Hello Joon,

Thank you for contacting us.

Only the Android RadListView control supports header and footer. You can check this article to see how to set them. The iOS TKListView control does not support header/footer, which means that even with custom renderer this scenario cannot be supported.

Here is an example of a custom renderer that sets a header to the Android list view:

[assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.DataControls.RadListView), typeof(CustomListViewRenderer))]

public class CustomListViewRenderer : Telerik.XamarinForms.DataControlsRenderer.Android.ListViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<RadListView> e)
    {
        base.OnElementChanged(e);
        if (this.Control != null)
        {
            this.Control.ListView.HeaderView = new TextView(Xamarin.Forms.Forms.Context) { Text = "Header" };
        }
    }
}

The only workaround that comes to my mind for iOS (and for Android with no custom renderer) is to group the items in the list view in a single group and use the group header. Here you can find more information about grouping.

I hope this helps. Please, let us know if you have some custom solution for iOS in mind that requires extending the functionality of the default Telerik ListView renderer and you need help with that.

Regards,
Rosy Topchiyska
Telerik

[Joon]

Hi Rosy,

Thank you so much for your reply!!

I am actually developing against Android only at the moment. For your idea of using the groupheadertemplate, I've tried that and it works for a static view, but in that header, I need to set some data and etc. I thought the only way you can set some data in the groupheader is by {binding } and it only assigns a single key(the grouping key set by groupdescriptor), right? I have multiple controls in the header that I need to control dynamically, so the GroupHeader idea didn't work for me. Or is there a way you can actually use multiple group descriptor that I can bind in the header {binding key1} {binding key2} and etc?

Back to the Android RadList header idea, that's great! as I don't need iOS at this stage. However, is there an easy way you can assign a Xamarin Forms view(Which I would have created in the Xamarin Forms PCL project) to the this.Control.ListView.HeaderView without having to create things in using Xamarin.Android? Well, this question is more for the Xamarin itself, not much to do with the RadList itself, but if you had that idea off top of your head, please let me know. Otherwise, I should research this :)

 

I still need a bit more research and help but at least I am very glad that Android one has the HeaderView!

Thank you so much for the info!

 

Thanks a million.

 

John Choi

[Joon]

Hi,

Using the GroupHeaderTemplate idea from Rosy and binding using the Markup Extension like below within worked for me! Basically, using the Markup Extension {x:Reference [some_data_source]} within the GroupHeaderTemplate allows to reference data outside the scope of the grouping key. You can bind any data and also the event handler like "Clicked" works from the GroupHeaderTemplate as well. You cannot though use x:Name to reference controls. However you can work around it by using Binding using from other context like code below.

<Image HeightRequest="280" Source="{Binding Source={x:Reference EventsList}, Path=BindingContext.TripMainImage}" Aspect="AspectFill"></Image>

[Joon]

Corrections to above : 

in {x:Reference EventsList}, EventsList is actually the name(x:Name) of the RadList control. Therefore, I am referencing it and the Path being the "BindingContext.TripMainImage" means, the binding context of the RadList control, and I've a property named "TripMainImage" which I used to display as the image source.

 

Thanx

[Rosy Topchiyska]

Hello Joon,

Glad that you found a solution. This is just a note on your question about setting a Xamarin Forms element in the Android ListView header. In the next internal build we will expose a way to build a native Android View from any Xamarin Forms View. This has already been exposed for WinRT (Telerik.XamarinForms.Common.WinRT.RadViewContainer) and iOS (Telerik.XamarinForms.Common.iOS.RadViewContainer). Until now we have used these containers internally, but it seems that they could be very useful for our customers and we decided to expose all of them in the next internal build.

Regards,
Rosy Topchiyska
Telerik

[Bruce]

Rosy, I don't dispute your analysis, but your thinking might be just a bit narrow.  DevExpress has a DataGrid control that provides a header that works on both Android and iOS.  You may want to check it out.

That control has a number of issues that make it largely unusable, but it does have a header.

[Rosy Topchiyska]

Hi Bruce,

Thank you for the comment! I have logged a feature request in our feedback portal where our community can vote for it and raise its priority.

Regards,
Rosy Topchiyska
Telerik by Progress