1. Home
  2. Forum
  3. Xamarin.Forms
  4. Tapping not working with items of SfListView

Tapping not working with items of SfListView

Hi,

I have made a sample application and added GestureRecognizer to it, but tapping isn't working.

Could you please help me with this.


Thanks

Sonal




Attachment: GestureRecognizer_(2)_b891296d.zip

5 Replies
LN Lakshmi Natarajan Syncfusion Team February 23, 2022 11:06 AM UTC

Hi Sonal, 
 
We suggest you achieve your requirement by binding the command by using TapViewModel as source. Please refer to the following code snippets for more reference, 
 
// Single tap 
TapGestureRecognizer gestureRecognizer = new TapGestureRecognizer { NumberOfTapsRequired = 1 }; 
gestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, new Binding() { Source = tapViewModel, Path = "TapCommand" }); 
gestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, "."); 
bodyLayout.GestureRecognizers.Add(gestureRecognizer); 
 
// Double tap 
gestureRecognizer = new TapGestureRecognizer { NumberOfTapsRequired = 2 }; 
gestureRecognizer.SetBinding(TapGestureRecognizer.CommandProperty, new Binding() { Source = tapViewModel, Path = "DoubleTapCommand" }); 
gestureRecognizer.SetBinding(TapGestureRecognizer.CommandParameterProperty, "."); 
bodyLayout.GestureRecognizers.Add(gestureRecognizer); 
 
Please refer to our user guidance document to bind command in the ItemTemplate, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


SK sonal khatri February 24, 2022 04:59 PM UTC

Hi Lakshmi,


I have added a combination of Label and BoxView as items of a list.

I want the BoxView to be visible when I tap to select an item and Change its color to blue but right now I am not able to achieve this.

Could you please help.

In the below method of TapView class I want to add something as highlighted in bold:

private static Tuple<BoxView, Label> AddCell(ICollection<View> gridChildren, int column,

            string textBindingProperty, string text = null, bool isBindable = true)

        {

            TapViewModel tap = new TapViewModel();

            BoxView cellBoxView = CreateBoxView(column);

            Grid.SetColumn(cellBoxView, column);

            gridChildren.Add(cellBoxView);


            Label cellLabel = CreateLabel(textBindingProperty);


            if (isBindable)

            {

                cellBoxView.SetBinding(IsVisibleProperty, nameof(TapViewModel.IsSelected),

                    converter: new InverseBoolConverter());

                cellBoxView.BindingContext = tap.IsSelected;

                cellLabel.SetBinding(Label.TextColorProperty, nameof(TapViewModel.TextColor));

            }


            if (text == null)

                cellLabel.SetBinding(Label.TextProperty, textBindingProperty);

            else

                cellLabel.Text = text;


            Grid.SetColumn(cellLabel, column);

            gridChildren.Add(cellLabel);


            return new Tuple<BoxView, Label>(cellBoxView, cellLabel);

        }

TapViewModel:

        private bool _isSelected;

        public virtual bool IsSelected

        {

            get { return _isSelected; }

            set

            {

                _isSelected = value;


                BackgroundColor = SelectedBackgroundColor;



                OnPropertyChanged();

            }

        }

The sample app is same as attached earlier.


Thanks

Sonal





LN Lakshmi Natarajan Syncfusion Team February 26, 2022 11:05 AM UTC

Hi Sonal, 
 
You can achieve your requirement by binding the IsSelected property to the BoxView.IsVisible property. To achieve this requirement, we suggest you define the IsSelected property in the Product model class. 
 
Please refer to the following code snippets for more reference, 
private static Tuple<BoxView, Label> AddCell(ICollection<View> gridChildren, int column, 
    string textBindingProperty, string text = null, bool isBindable = true) 
{ 
    … 
    gridChildren.Add(cellBoxView); 
 
    Label cellLabel = CreateLabel(textBindingProperty); 
 
    if (isBindable) 
    { 
        cellBoxView.SetBinding(BoxView.IsVisibleProperty, new Binding("IsSelected")); 
    } 
   … 
} 
 
//TapViewModel 
 
public void OnTapped(object obj) 
{ 
    (obj as Product).IsSelected = true; 
    App.Current.MainPage.DisplayAlert("Login Success", "", "Ok"); 
} 
 
 
We have attached the modified sample in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


SK sonal khatri March 1, 2022 04:16 PM UTC

Hi Lakshmi,


Thank you so much for your help. 

My requirement is that when I tap to select an item then the color of the selected item should be blue. Right now the background color is changing to blue.


Please see the attached image.


Thanks

Sonal


Attachment: ItemSelected_c39e6034.rar

LN Lakshmi Natarajan Syncfusion Team March 2, 2022 01:19 PM UTC

Hi Sonal, 
 
When handling gestures in the ItemTemplate, the touch will be handled by the gestures only. So, you can achieve your requirement by changing the BackgroundColor of the item using converter.  
 
Please refer to the following code snippets for more reference, 
listView.ItemTemplate = new DataTemplate(() => 
{ 
    Grid bodyLayout = new Grid 
    { 
        ColumnSpacing = 0, 
        RowSpacing = 0, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        VerticalOptions = LayoutOptions.FillAndExpand 
    }; 
 
    var binding = new Binding("IsSelected"); 
    binding.Converter = new ItemsBackgroundColorConverter(); 
    bodyLayout.SetBinding(Grid.BackgroundColorProperty, binding); 
    bodyLayout.RowDefinitions.Add(new RowDefinition { Height = RowHeight }); 
    bodyLayout.RowDefinitions.Add(new RowDefinition { Height = 1 }); 
 
   … 
    return bodyLayout; 
}); 
 
Converter: Return the background color based on IsSelected property. 
public class ItemsBackgroundColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return (bool)value ? Color.FromHex("#1572A1") : Color.Transparent; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
 
We have attached the sample to achieve your requirement and attached in the following link, 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 


Loader.
Up arrow icon