We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use custom renderer for ListView in Xamarin.Forms (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 14, 2020 |
Last Revised Date: April 14, 2020

You can use custom renderers to implement own logics in Xamarin.Forms ListView.

Please follow the following steps to create customer renderer,

STEP 1: Extend ListView in PCL project.

namespace ListViewXamarin
{
    public class ExtendedListView : SfListView
    {
    }
}

STEP 2: Use ExtendedListView in xaml page.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             x:Class="ListViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <local:ExtendedListView x:Name="listView" DragStartMode="OnHold" ItemSpacing="1" AutoFitMode="Height" ItemsSource="{Binding contactsinfo}">
            <local:ExtendedListView.ItemTemplate >
                <DataTemplate>
                    ...
                </DataTemplate>
            </local:ExtendedListView.ItemTemplate>
        </local:ExtendedListView>
    </ContentPage.Content>
</ContentPage>

STEP 3: Create custom renderer for ExtendedListView in the native projects.

Android

[assembly: ExportRenderer(typeof(ExtendedListView), typeof(SfListViewControlRenderer))]
[assembly: ExportRenderer(typeof(ExtendedListView), typeof(MaterialSfListViewRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace Syncfusion.ListView.XForms.Android
{
    internal class SfListViewControlRenderer : VisualElementRenderer<SfListView>
    {
        /// <summary>
        /// Actual visual of the control.
        /// </summary>
        protected IVisual ActualVisual = VisualMarker.Default;
        internal SfListView ListView
        {
            get
            {
                return this.Element as SfListView;
            }
        }
        public SfListViewControlRenderer(Context context) : base(context)
        {
 
        }
 
        protected override void OnElementChanged(ElementChangedEventArgs<SfListView> e)
        {
            if (this.Element != null)
                Element.BackgroundColor = Color.LightPink; //Set Background color for ListView
            base.OnElementChanged(e);
        }
    }
 
    internal class MaterialSfListViewRenderer : SfListViewControlRenderer
    {
        public MaterialSfListViewRenderer(Context context) : base(context)
        {
            this.ActualVisual = VisualMarker.Material;
        }
    }
}

iOS

[assembly: ExportRenderer(typeof(ExtendedListView), typeof(SfListViewControlRenderer))]
[assembly: ExportRenderer(typeof(ExtendedListView), typeof(MaterialSfListViewRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace Syncfusion.ListView.XForms.iOS
{
    internal class SfListViewControlRenderer : VisualElementRenderer<SfListView>
    {
        /// <summary>
        /// Actual visual of the control.
        /// </summary>
        protected IVisual ActualVisual = VisualMarker.Default;
        internal SfListView ListView
        {
            get
            {
                return this.Element as SfListView;
            }
        }
        public SfListViewControlRenderer()
        {
 
        }
 
        protected override void OnElementChanged(ElementChangedEventArgs<SfListView> e)
        {
            if (this.Element != null)
                Element.BackgroundColor = Color.LightCyan; //Set Background color for ListView
 
            base.OnElementChanged(e);
        }
    }
 
    internal class MaterialSfListViewRenderer : SfListViewControlRenderer
    {
        public MaterialSfListViewRenderer()
        {
            this.ActualVisual = VisualMarker.Material;
        }
    }
}

UWP

[assembly: ExportRenderer(typeof(ExtendedListView), typeof(SfListViewControlRenderer))]
namespace ListViewXamarin.UWP
{
    internal class SfListViewControlRenderer : VisualElementRenderer<SfListView, CustomControl>
    {
        private CustomControl control;
 
        internal SfListView ListView
        {
            get
            {
                return this.Element as SfListView;
            }
        }
        public SfListViewControlRenderer()
        {
 
        }
        protected override void OnElementChanged(ElementChangedEventArgs<SfListView> e)
        {
            base.OnElementChanged(e);
 
            if (e.NewElement != null)
            {
                this.control = new CustomControl();
                this.SetNativeControl(this.control);
            }
        }
 
        /// <summary>
        /// Updates the <see cref="SfListViewControlRenderer"/> when <see cref="SfListView"/> properties are changed.
        /// </summary>
        /// <param name="sender">Represents the <see cref="SfListView"/>.</param>
        /// <param name="e">Represents the property changed event arguments.</param>
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
 
            if (e.PropertyName == "BackgroundColor" || e.PropertyName == "Renderer")
            {
                this.Background = ColorExtensions.ToBrush(new Xamarin.Forms.Color(0,1,0,0.15)); //Set Background color for ListView 
            }
            else
            {
                base.OnElementPropertyChanged(sender, e);
            }
        }
    }
    internal class CustomControl : Windows.UI.Xaml.Controls.Control
    {
 
    }
}

 

Note:

ListView behaviors like DragAndDrop, KeyNavigation are handled in our renderer. Since, the default renderer is overridden, it should be handled in custom renderer.

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Amir H
Feb 10, 2021

It says SfListViewControlRenderer is inaccessible due to its protection level.

Reply
Amir H
Feb 10, 2021

MaterialSfListViewRenderer is inaccessible due to its protection level.*

Lakshmi Natarajan [Syncfusion]
Feb 16, 2021

Hi Amir,

Greetings from Syncfusion.

The SfListViewControlRenderer and MaterialSfListViewRenderer are the custom renderers at the sample level. Also, you can create your own renderer for the SfListView as explained in the document.

Regards, Lakshmi Natarajan

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile