How to get the selected item from .NET MAUI ListView?

This section explains how to retrieve the selected item from the .NET MAUI ListView (SfListView) when using an .NET MAUIEffectsView within the ItemTemplate.

The scenario involves displaying book information within a ListView. The home page shows a list of books, and upon selection, the corresponding book descriptions are displayed on the second page during navigation.

To achieve this, the AnimationCompleted event of EffectsView can be employed to retrieve the selected item from the ListView. The following code sample illustrates this process.

XAML

  <syncfusion:SfListView  x:Name="listview"
                          ItemsSource="{Binding BookInfo}">
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>                   
                  <effectsView:SfEffectsView 
                                   HeightRequest="50"
                                   AnimationCompleted="SfEffectsView_AnimationCompleted">
                      <StackLayout VerticalOptions="CenterAndExpand">
                            <Label Text="{Binding BookName}"  
                                   FontAttributes="Bold" 
                                   TextColor="Teal" 
                                   FontSize="15" />
                        </StackLayout>
                    </effectsView:SfEffectsView>              
                </ViewCell>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>        
    </syncfusion:SfListView>

C#

private void SfEffectsView_AnimationCompleted(object sender, EventArgs e) 
{
         var effectsView = sender as SfEffectsView;
         var selectedItem = effectsView.BindingContext as BookInfo;         

         Navigation.PushAsync(new NewPage() { BindingContext = selectedItem });
}

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" });
        }     
}    

NewPage

ContentPage  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SfEffectView.NewPage"
             Title="Book Description">
             
            <StackLayout>           
            <Label Text="{Binding BookDescription}"  
                   FontAttributes="Bold" 
                   TextColor="Teal" 
                   FontSize="15" />
            </StackLayout>
</ContentPage>

Output

You can refer to our .NET MAUI SfEffectsView feature tour tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI SfEffectsView Documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and download 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 forum, Direct-Trac, or feedback portal. We are always happy to assist you!