We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 28, 2020 |
Last Revised Date: April 28, 2020

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile