将 TapGestureRecognizer 应用于水平列表中的标签 - Xamarin Forms

Posted

技术标签:

【中文标题】将 TapGestureRecognizer 应用于水平列表中的标签 - Xamarin Forms【英文标题】:Apply TapGestureRecognizer to a Label in Horizontal list - Xamarin Forms 【发布时间】:2017-05-03 09:45:10 【问题描述】:

我正在尝试将一些数字的水平列表作为 ListView 的一个项目,我已经完成了看起来不错..

Sample screenshot of horizontal list as item in ListView

接下来我想要的是当我滚动任何项目的水平列表时,我希望自动选择水平列表中的中间一个,并且我希望所选值显示在该项目的标签中,因此我想要其他水平列表也将自动滚动并执行相同的操作(各个标签的所有值应分别保持其偏移值的差异)。

这有点棘手,我知道 GestureRecognizer 在这里会有所帮助,但我很困惑在哪里以及如何在此处实现它,因为我是 xamarin 的新手。 我将在此处编写所有提供上述屏幕截图的代码作为输出..

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 BoxViewHeightRequest=1,BackgroundColor=Color.Gray
                        

                       
                   ;
               )
        ;

        this.Content = new StackLayout
        
            Children =
            
                    timePlannerLV
            
        ;
    



 

任何帮助将不胜感激..提前致谢..

【问题讨论】:

【参考方案1】:

我不完全确定您想在这里做什么。但是您需要将手势识别器添加到您生成的标签中。所以,像这样添加它:

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

希望这可以帮助你相处。

【讨论】:

以上是关于将 TapGestureRecognizer 应用于水平列表中的标签 - Xamarin Forms的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 tapGestureRecognizer 在屏幕上注册点击

张高兴的 Xamarin.Forms 开发笔记:TapGestureRecognizer 的简单介绍与应用

带有 TapGestureRecognizer 的最前面的 UIView 没有收到触摸

将 TapGestureRecognizer 添加到除 UICollectionView 单元格之外的整个视图

将tapGestureRecognizer添加到其背景视图时无法触发collectionview的事件

TapgestureRecognizer 将触摸检测为滚动视图