How to work with Material Visual for custom ListView in Xamarin.Forms (SfListView)
You can use Material effects for SfListView by Extending ItemGenerator and ListViewItem class in Xamarin.Forms. By default, the SfListView supports ripple effects for Selection and Slide swiping effect for Swiping with Material design.
XAML
Enable Visual as Material for Content page to enable the material effects for SfListView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin"
xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
x:Class="ListViewXamarin.MainPage"
Visual="Material">
<ContentPage.BindingContext>
<local:ViewModel />
</ContentPage.BindingContext>
<ContentPage.Behaviors>
<local:Behavior/>
</ContentPage.Behaviors>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0">
<sync:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding BookInfo}" SelectionBackgroundColor="#d3d3d3">
<sync:SfListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0,12,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<StackLayout Orientation="Vertical" Padding="8,0,8,10" VerticalOptions="Start" Grid.Row="0">
<Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="16" TextColor="#000000" />
<Label Text="{Binding BookAuthor}" Grid.Row="1" FontSize="14" Opacity=" 0.67" TextColor="#000000" />
<Label Text="{Binding BookDescription}" Opacity=" 0.54" TextColor="#000000" FontSize="13"/>
</StackLayout>
<BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" />
</Grid>
</DataTemplate>
</sync:SfListView.ItemTemplate>
</sync:SfListView>
</Grid>
</ContentPage>
C#
Extend the ItemGenerator and return the customized ListViewItem based on ItemType.
namespace ListViewXamarin
{
public class ItemGeneratorExt : ItemGenerator
{
public ItemGeneratorExt(SfListView listview) : base(listview)
{
}
protected override ListViewItem OnCreateListViewItem(int itemIndex, ItemType type, object data = null)
{
if (type == ItemType.Record)
return new ListViewItemExt(type);
return base.OnCreateListViewItem(itemIndex, type, data);
}
}
}
C#
Extend the ListViewItem and initialize the ListViewItemExt constructor with ItemType as parameter to enable ListViewItem Effects.
namespace ListViewXamarin
{
public class ListViewItemExt : ListViewItem
{
public ListViewItemExt()
{
}
public ListViewItemExt(ItemType type) : base(type)
{
}
protected override void OnItemAppearing()
{
this.Opacity = 0;
this.FadeTo(1, 400, Easing.SinInOut);
base.OnItemAppearing();
}
}
}
C#
Set the instance of the ItemGeneratorExt class to the ListView.ItemGenerator property.
namespace ListViewXamarin
{
public class Behavior : Behavior<ContentPage>
{
SfListView ListView;
protected override void OnAttachedTo(ContentPage bindable)
{
ListView = bindable.FindByName<SfListView>("listView");
ListView.ItemGenerator = new ItemGeneratorExt(this.ListView);
base.OnAttachedTo(bindable);
}
protected override void OnDetachingFrom(ContentPage bindable)
{
ListView = null;
base.OnDetachingFrom(bindable);
}
}
}
Output
When EffectsView is applied to ListView by adding Visual as Material, it is necessary to initialize the EffectsViewRenderer in iOS.
You can also refer to the following document link to use EffectsView in the application.
