Parallax ListView Header

[IanV]

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

 

 

[Lance | Manager Technical Support]

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 Composition) http://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