Category / Section
How to Use Custom Renderer in Xamarin.Forms ListView?
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.
Conclusion
I hope you enjoyed learning how to use custom renderer in Xamarin.Forms SfListView.
You can refer to our Xamarin.Forms SfListView
feature tour page to know about its
other groundbreaking feature representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our Xamarin. Forms SfListView
example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
