How to apply ripple effect on items in .NET MAUI ListView (SfListView)?

The .NET MAUI ListView allows the user to enhances user interaction by adding a ripple effect of .NET MAUI SfEffectsView to the ListView items.

XAML:

You can integrate the ripple effect in .NET MAUI ListView by loading the SfEffectsView as the content of ItemTemplate and set TouchDownEffects to Ripple.

   <Grid>
      <syncfusion:SfListView x:Name="listView"
                             ItemsSource="{Binding BookInfo}"
                             ItemSize="100">
          <syncfusion:SfListView.ItemTemplate>
              <DataTemplate>
                  <core:SfEffectsView ShouldIgnoreTouches="false"
                                      HighlightBackground="#FF0000"
                                      RippleAnimationDuration="800"
                                      TouchDownEffects="Ripple">
                      <Grid Padding="10">
                          <Grid.RowDefinitions>
                              <RowDefinition Height="0.4*" />
                              <RowDefinition Height="0.6*" />
                          </Grid.RowDefinitions>
                          <Label Text="{Binding BookName}"
                                 FontAttributes="Bold"
                                 TextColor="Teal"
                                 FontSize="21" />
                          <Label Grid.Row="1"
                                 Text="{Binding BookDescription}"
                                 TextColor="Teal"
                                 FontSize="15" />
                      </Grid>
                  </core:SfEffectsView>
              </DataTemplate>
          </syncfusion:SfListView.ItemTemplate>
      </syncfusion:SfListView>
  </Grid>

Note
In Android platform, when a child view (SfEffectsView) handles touch events, the touch is not propagated to the parent element (ListViewItem). This behavior causes built-in touch interaction features, like selection and swiping within the ListView, to stop functioning correctly.
It can be resolved by creating custom ListViewItem and manually handle the touch interactions .

C#
Custom ItemsGenerator class,

public class ItemGeneratorExt : ItemsGenerator
{
    private SfListView listView;
    public ItemGeneratorExt(SfListView listView) : base(listView)
    {
   this.listView = listView;
    }
    
    protected override ListViewItem OnCreateListViewItem(int itemIndex, ItemType type, object data = null)
    {
     if (type == ItemType.Record)
        return new ListViewItemExt(this.listView);
        
     return base.OnCreateListViewItem(itemIndex, type, data);
    }
}

Custom ListViewItem class,

public class ListViewItemExt : ListViewItem, ITouchListener, ITapGestureListener, ILongPressGestureListener
{
   private SfListView listView;
   private SfEffectsView effectsView;

   public ListViewItemExt(SfListView listView)
   {
   	this.listView = listView;
   }

   protected override void OnChildAdded(Element child)
   {
   	base.OnChildAdded(child);
   	if (child is SfEffectsView)
   	{
   		effectsView = child as SfEffectsView;
   		effectsView.RemoveTouchListener(effectsView);
   		effectsView.RemoveGestureListener(effectsView);
   		effectsView.AnimationCompleted += EffectsView_AnimationCompleted;
   	}
   }
   
   private void EffectsView_AnimationCompleted(object? sender, EventArgs e)
   {
   	effectsView.Reset();
   }
   
   void ITouchListener.OnTouch(Syncfusion.Maui.Core.Internals.PointerEventArgs e)
   {
   	effectsView.OnTouch(e);
   	base.OnTouch(e);
   }
   
   void ITapGestureListener.OnTap(TapEventArgs e)
   {
   	effectsView.OnTap(e);
   	base.OnTap(e);
   }

   void ILongPressGestureListener.OnLongPress(LongPressEventArgs e)
   {
   	effectsView.OnLongPress(e);
   	base.OnLongPress(e);
   }
}

XAML.cs

Assign the instance of ItemsGeneratorExt class to ItemsGenerator property of ListView.

namespace ListViewMaui
{
   public partial class MainPage : ContentPage
   {
   	public MainPage()
   	{
   		InitializeComponent();
#if ANDROID
   		this.listView.ItemGenerator = new ItemGeneratorExt(this.listView);
#endif
   	}

   }
} 

View Sample in GitHub

Conclusion:

I hope you enjoyed learning about how to apply ripple effect for Items in .NET MAUI SfListView.

You can refer to our .NET MAUI SfListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!