How to implement ListView HeaderTemplate?

7 posts, 0 answers
  1. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 02 May Link to this post

    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
  2. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 03 May in reply to Joon Link to this post

    Any help on this please?
  3. DevCraft banner
  4. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 04 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 04 May in reply to Rosy Topchiyska Link to this post

    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

  6. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 05 May in reply to Joon Link to this post

    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>

  7. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 05 May in reply to Joon Link to this post

    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

  8. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 09 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner