Apply TapGestureRecognizer to a Label in Horizontal list - Xamarin Forms

Question

I am trying put a horizontal list of some numbers as an item of ListView and I am done with that looks nice..

Sample screenshot of horizontal list as item in ListView

what I want next is when I scroll a horizontal list of any item, I want the middle one in the horizontal list to be selected automatically and I want the selected value to be displayed in the Label of that item and accordingly I want the other horizontal lists also to be scrolled automatically and do the same (All the values of individual labels should maintain a difference of their offset values respectively).

This is something tricky, I know the GestureRecognizer will help here but I am confused where and how to implement it here, as I am new to xamarin.. I will write all the code that gives the above screenshot as output here..

namespace ViewsAndComponents
 {
     class LVItem : INotifyPropertyChanged
     {
    private double _offset;
    private string _num;

    public string Num
    {
        get { return _num; }
        internal set
        {
            _num = value;
            OnPropertyChanged("Num");
        }
    }

    public double Offset
    {
        get { return _offset; }
        internal set
        {
            _offset = value;
            OnPropertyChanged("Offset");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public partial class SVInsideLVItem : ContentPage
{
    ObservableCollection<LVItem> Items = new ObservableCollection<LVItem>();
    ListView timePlannerLV;

    Label tL;

    public SVInsideLVItem()
    {
        InitializeComponent();

        Items.Add(new LVItem() { Num = "label-1", Offset = 5 });
        Items.Add(new LVItem() { Num = "label-2", Offset = 1 });
        Items.Add(new LVItem() { Num = "label-3", Offset = 3 });
        Items.Add(new LVItem() { Num = "label-4", Offset = 2 });
        Items.Add(new LVItem() { Num = "label-5", Offset = 4 });

        timePlannerLV = new ListView
        {
            // Source of data items.
            ItemsSource = Items,
            HasUnevenRows = true,
            RowHeight = -1,

            //each item; it must return a Cell derivative.)
            ItemTemplate = new DataTemplate(() =>
               {

                   Label numL = new Label()
                   {
                       TextColor = Color.Black,
                       HorizontalTextAlignment = TextAlignment.Start,
                       FontSize = Device.GetNamedSize(NamedSize.Small, new Label())
                   };

                   numL.SetBinding<LVItems>(Label.TextProperty, indexer => indexer.Num);


                   List<int> items = new List<int>();
                   items.Add(1);
                   items.Add(2);
                   items.Add(3);
                   items.Add(4);
                   items.Add(5);
                   items.Add(6);
                   items.Add(7);
                   items.Add(8);
                   items.Add(9);
                   items.Add(10);
                   items.Add(11);
                   items.Add(12);
                   items.Add(13);
                   items.Add(14);
                   items.Add(15);
                   items.Add(16);
                   items.Add(17);
                   items.Add(18);
                   items.Add(19);
                   items.Add(20);

                   StackLayout sLayout = new StackLayout()
                   {
                       Orientation = StackOrientation.Horizontal,

                   };

                   for (int i = 0; i < items.Count; i++)
                   {
                       Label label = new Label()
                       {
                           HorizontalTextAlignment = TextAlignment.Center,
                           TextColor = Color.Black,
                           FontSize = Device.GetNamedSize(NamedSize.Small, new Label())
                       };

                       label.Text = items[i].ToString();

                       sLayout.Children.Add(label);
                   }

                   ScrollView scroll = new ScrollView
                   {
                       Orientation = ScrollOrientation.Horizontal,
                       Content = new StackLayout
                       {
                           Children =
                         {
                            sLayout
                           }

                       }
                   };

                   AbsoluteLayout layout = new AbsoluteLayout();
                   AbsoluteLayout.SetLayoutFlags(numL, AbsoluteLayoutFlags.All);
                   AbsoluteLayout.SetLayoutBounds(numL, new Rectangle(0.2, 0.2, 0.8, 0.25));

                   AbsoluteLayout.SetLayoutFlags(scroll, AbsoluteLayoutFlags.All);
                   AbsoluteLayout.SetLayoutBounds(scroll, new Rectangle(0.3, 0.6, 0.8, 0.2));


                   layout.Children.Add(numL);
                   layout.Children.Add(scroll);

                   return new ViewCell
                   {
                       View = new StackLayout
                       {
                           Children =
                        {
                            layout,
                            new BoxView{HeightRequest=1,BackgroundColor=Color.Gray}
                        }

                       }
                   };
               })
        };

        this.Content = new StackLayout
        {
            Children =
            {
                    timePlannerLV
            }
        };
    }

}

 }

Any help would be appreciated.. thanks in advance..

Gerald Versluis Gerald Versluis · Accepted Answer · 2017-05-03T09:49:55

I'm not entirely sure what you want to do here.. But you need to add the gesturerecognizer to the label you generate. So, add it like this:

Label label = new Label()
{
    HorizontalTextAlignment = TextAlignment.Center,
    TextColor = Color.Black,
    FontSize = Device.GetNamedSize(NamedSize.Small, new Label())
};

label.Text = items[i].ToString();

var gestureRecognizer = new TapGestureRecognizer {
    TappedCallback = o => selectedLabel.Text = o,
    NumberOfTapsRequired = 1
};

label.GestureRecognizers.Add (gestureRecognizer);

sLayout.Children.Add(label);

Hope this helps you get along.

Apply TapGestureRecognizer to a Label in Horizontal list - Xamarin Forms

1 Answers