Articles in this section
Category / Section

How to select an item when a view is tapped in the template?

3 mins read

ListView allows you to select an item by interacting with any elements in ItemTemplate. It can be achieved by binding the SelectedItem property and setting desired item using child control command loaded in the item template.

 

XAML

<syncfusion:SfListView x:Name="listView" AutoFitMode="Height" ItemSpacing="3"
                        SelectedItem="{Binding SelectedItem}" BackgroundColor="#d3d3d3"
                       SelectionChanging="listView_SelectionChanging"
                        ItemsSource="{Binding BookInfoCollection}">
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <Frame HasShadow="True" BackgroundColor="Transparent" >
                <Grid Padding="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Text="{Binding BookName}" CommandParameter="{Binding .}" Command="{Binding BindingContext.ItemTap, Source={x:Reference listView}}}" FontAttributes="Bold" FontSize="19" />
                    <Button Text="{Binding BookID}" Grid.Column="1" CommandParameter="{Binding .}" Command="{Binding BindingContext.ItemTap, Source={x:Reference listView}}}" FontAttributes="Bold" FontSize="19" />
                    <Button Text="{Binding SerialNumber}" Grid.Column="2" CommandParameter="{Binding .}" Command="{Binding BindingContext.ItemTap, Source={x:Reference listView}}}" FontAttributes="Bold" FontSize="19" />
                </Grid>
            </Frame>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

 

C#

public class BookInfoRepository : INotifyPropertyChanged
{
    private ObservableCollection<BookInfo> bookInfoCollection;
    public event PropertyChangedEventHandler PropertyChanged;
    private object selectedItem;
    private Command<object> itemTap;
 
    public ObservableCollection<BookInfo> BookInfoCollection
    {
        get { return bookInfoCollection; }
        set
        {
            this.bookInfoCollection = value;
            this.OnPropertyChanged("BookInfoCollection");
        }
    }
 
    public object SelectedItem
    {
        get { return this.selectedItem; }
        set
        {
            this.selectedItem = value;
            this.OnPropertyChanged("SelectedItem");
        }
    }
 
    public Command<object> ItemTap
    {
        get { return this.itemTap; }
        set
        {
            this.itemTap = value;
            this.OnPropertyChanged("ItemTap");
        }
    }
 
    public void OnPropertyChanged(string name)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
 
    public BookInfoRepository()
    {
        GenerateNewBookInfo();
        ItemTap = new Command<object>(OnItemTap);
    }
 
    private void OnItemTap(object obj)
    {
       this.SelectedItem = obj;
    }
 
    private void GenerateNewBookInfo()
    {
        BookInfoCollection = new ObservableCollection<BookInfo>();
        BookInfoCollection.Add(new BookInfo() { BookName = "Book1", BookDescription = "You’ll learn several different approaches to applying machine learning", BookID = 1, SerialNumber = "9876757" });
        BookInfoCollection.Add(new BookInfo() { BookName = "Book2", BookDescription = "Object-oriented programming is the de facto programming paradigm", BookID = 2, SerialNumber = "9876457" });
        BookInfoCollection.Add(new BookInfo() { BookName = "Book3", BookDescription = "Code Contracts provide a way to convey code assumptions" , BookID = 3, SerialNumber = "9876357"});
    }
}

 

In Android and UWP platforms, touch will be passed to the ListView parent element when interacting with child elements. So, handle the selection for list items in the SelectionChanging event, since selection is performed in button click action. 

 

 

C#

public partial class MainPage : ContentPage
{
  public MainPage()
  {
    InitializeComponent();            
  }
 
  private void listView_SelectionChanging(object sender, Syncfusion.ListView.XForms.ItemSelectionChangingEventArgs e)
  {
    e.Cancel = true;
  }
}

 

Screenshot:

sample

 

Click here to download the sample.

 

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