How to use the effects view in .NET MAUI ListView (SfListView)?

This section explains how to use the EffectsView in the .NET MAUI ListView(SfListView).

Step 1: Start by adding the ListView control to your XAML page and connect it to your data source, which is the “BookInfo” collection. Inside the ListView, use the DataTemplate element to specify the structure and appearance of each item in the list.

Step 2: Inside the DataTemplate, integrate the EffectsView control. This EffectsView imparts a ripple effect to the content, thereby elevating the visual appeal of each data item’s content.

XAML

 <syncfusion:SfListView ItemsSource="{Binding BookInfo}"
                        ItemSize="100">
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>                                                   
                    <effectsView:SfEffectsView>
                      <StackLayout VerticalOptions="CenterAndExpand">
                            <Label Text="{Binding BookName}"  
                                   FontAttributes="Bold" 
                                   TextColor="Teal" 
                                   FontSize="21" />
                            <Label Text="{Binding BookDescription}" 
                                   TextColor="Teal" 
                                   FontSize="15"/>
                        </StackLayout>
                    </effectsView:SfEffectsView>               
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>      

C#

Model

public class BookInfo 
{
    public string BookName { get; set;}
    
    public string BookDescription { get; set;}
} 

ViewModel

   public class BookInfoRepository 
   {      
        public ObservableCollection<BookInfo> Books {get; set;}

        public BookInfoRepository() 
        {
            Books = new ObservableCollection<BookInfo>();
            Books.Add(new BookInfo() { BookName = "Object-Oriented Programming in C#", BookDescription = "Object-oriented programming is a programming paradigm based on the concept of objects" });
            Books.Add(new BookInfo() { BookName = "C# Code Contracts", BookDescription = "Code Contracts provide a way to convey code assumptions" });
            Books.Add(new BookInfo() { BookName = "Machine Learning Using C#", BookDescription = "You will learn several different approaches to applying machine learning" });
            Books.Add(new BookInfo() { BookName = "Neural Networks Using C#", BookDescription = "Neural networks are an exciting field of software development" });
            Books.Add(new BookInfo() { BookName = "Visual Studio Code", BookDescription = "It is a powerful tool for editing code and serves for end-to-end programming" });
        }       
  }

Output

Conclusion

I hope you enjoyed learning how to use the effects view in .NET MAUI ListView(SfListView).

You can refer to our .NET MAUI EffectsView Feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI EffectsView documentationto understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and documents page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI EffectsView and other .NET MAUI components.

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-Track, or feedback portal. We are always happy to assist you!