Skip to content

This repository contains sample about how to use custom renderer for ListView in Xamarin.Forms (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/custom-renderer-listview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

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

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

You can also refer the following article.

https://www.syncfusion.com/kb/11398/how-to-use-custom-renderer-for-listview-in-xamarin-forms-sflistview

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.

About

This repository contains sample about how to use custom renderer for ListView in Xamarin.Forms (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages