Parallax ListView Header

2 posts, 0 answers
  1. IanV
    IanV avatar
    29 posts
    Member since:
    Dec 2008

    Posted 15 Apr Link to this post

    HI Guys,

    I am looking for a Parallax HeaderView for a ListView so that as you scroll the ListView, the Header expands or contracts.

    Is there such a tool in Telerik? (I haven't seen it yet)

     

    Ian

     

     

  2. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    999 posts

    Posted 16 Apr Link to this post

    Hi Ian,

    This isn't currently available in Xamarin.Forms, if you'd like the development team consider adding it as an official feature, submit a Feature Request in the UI for Xamarin Feedback Portal

    Custom Approach

    If you access the native controls, you can implement this yourself on each platform.

    For UWP, I would use the ParallaxView that comes with the Fluent Design system in the UWP API surface area: https://docs.microsoft.com/en-us/windows/uwp/design/motion/parallax 

    If you want/need to implement a cusotm parallax, follow this tutorial from James Clarke (Microsoft Program Manager and master of UI and Compositionhttp://www.visuallylocated.com/post/2015/12/10/Easy-Parallax-effect-in-Windows-10.aspx 

    I don't have any example of this in Android or iOS to share, but I'm sure there are some online. Be sure to keep the focus of the search to Xamarin.Android and Xamarin.iOS so that you get the correct API surface area. For example, here's one implementation for Android from Cheesebaron.

    Implementation

    Once you've devised a parallax solution, it's time to apply that to the native control. Here's the list of the native controls:

    On UWP that is the RadListView - https://docs.telerik.com/devtools/universal-windows-platform/controls/radlistview/listview-overview 
    On iOS it is the TKListView - https://docs.telerik.com/devtools/xamarin/nativecontrols/ios/listview/overview
    On Android, it is the RadListView - https://docs.telerik.com/devtools/xamarin/nativecontrols/android/listview/listview-overview


    Platform Effect

    You can also use a Platform Effect to access the native control. In my opinion, using an effect is an easier to use than a custom renderer. If you're not familiar with using the Effect approach, take a look at this blog to get started: https://devblogs.microsoft.com/xamarin/customizing-xamarin-forms-controls-with-effects/ 

    I highly recommend following the quick Platform Effect tutorials in the Xamarin Documentation on how to use a Platform Effect on an entry control. It will get you used to using the RoutingEffect registration and understand how they work. then you can move on to using it with a Telerik component.

    At the very least, do the first two articles:




    Custom Renderer

    A custom renderer extends the default renderer, allowing you to further cusotmize the native control as it is being instantiated. In order to implement a Custom Renderer for a Telerik control, you'll need to implement a custom renderer on each platform that gives you access to that control.

    As an example, this class lives in the Android project. The assembly attribute registers that renderer.

    using Android.Content;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;
     
    // Register your custom renderer (first parameter is the XamarinForms control and the 2nd parameter is the the custom renderer
    [assembly:ExportRenderer(typeof(Telerik.XamarinForms.DataControls.RadListView), typeof(MyApp.Android.MyCustomListViewRenderer))]
    namespace MyApp.Android
    {
        public class MyCustomListViewRenderer : Telerik.XamarinForms.DataControlsRenderer.Android.ListViewRenderer
        {
            public MyCustomListViewRenderer(Context context)
                : base (context)
            {
            }
     
            protected override void OnElementChanged(ElementChangedEventArgs<Telerik.XamarinForms.DataControls.RadListView> e)
            {
                // New element is the Xamarin.Forms RadListView control
                if (e.NewElement != null)
                {
                    // this.Control is the native Android RadListView
                    var nativeRadListView = this.Control.ListView as Com.Telerik.Widget.List.RadListView;
                }
     
                base.OnElementChanged(e);
            }
        }
    }

    In there, you have access ot the native control and can apply whatever customization you want.

    As with the Effects documentation, I highly recommend reviewing the great documentation Microsoft has on using Custom Renderers. Start here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/index 

    The work your way through some of the examples:




    Further Assistance 

    Telerik Support doesn't cover customization applied in renderers as it falls outside the scope of support, but if you have trouble using the renderer's features feel free to open a Support Ticket here and ask for a policy exeption.

    I hope this information was helpful.

    Regards,
    Lance | Technical Support Engineer, Principal
    Progress 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