Articles in this section
Category / Section

How to work with Material Visual for custom ListView in Xamarin.Forms (SfListView)

2 mins read

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

How to use Visual as Material with animation in Xamarin.Forms ListView.

Note:

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.

https://help.syncfusion.com/xamarin/effects-view/getting-started#launching-an-application-on-each-platform-with-sfeffectsview

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied