Category / Section
How to use custom renderer for ListView in Xamarin.Forms (SfListView)
2 mins read
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.