Xamarin Forms CollectionView TapGestureRecognizer不在标签上触发

时间:2019-09-12 21:25:14

标签: xamarin xamarin.forms

我有一个XF应用程序,其中定义了以下收集视图。第二个标签具有TapGestureRecognizer,当我点击标签时(在Android上尝试使用此标签),该标签不会在模型中触发DoSomethingInteresting。有人可以看到问题所在吗?

有效示例可以为cloned from here

XAML

<?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:SampleApp"
                 x:Class="SampleApp.MainPage">

        <StackLayout>
            <CollectionView ItemsSource="{Binding GaugeSites}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40" />
                            </Grid.RowDefinitions>

                            <Label Grid.Column="0"
                                   Text="{Binding Description}"
                                   FontSize="20"
                                   Margin="10"
                                   TextColor="Black"
                                   FontAttributes="Bold" />

                            <Label Grid.Column="1" 
                                   Margin="10"
                                   FontSize="20" 
                                   Text="Click Me!">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding DoSomethingInteresting}" />
                                </Label.GestureRecognizers>
                            </Label>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

            </CollectionView>
        </StackLayout>
    </ContentPage>

模型

namespace SampleApp
{
    public class MainPageModel : FreshBasePageModel
    {
        public MainPageModel() : base()
        {
            GaugeSites = new List<GaugeSite>();

            for (var index = 1; index <= 5; index++)
            {
                GaugeSites.Add(new GaugeSite()
                {
                    Description = $"Gauge Site {index}"
                });
            }
        }

        public List<GaugeSite> GaugeSites { get; set; }

        public Command DoSomethingInteresting
        {
            get
            {
                return new Command(() =>
                {

                });
            }
        }
    }

    [AddINotifyPropertyChangedInterface]
    public class GaugeSite
    {
        public string Description { get; set; }
    }
}

2 个答案:

答案 0 :(得分:1)

我已经下载了您的示例,请查看以下步骤。

1。为MainPage bindingContext绑定MainpageModel,在MainPage.cs中添加此行。

 this.BindingContext = new MainPageModel();

2。将Collectionview命名为collection1,然后修改label命令。

 <CollectionView x:Name="collection1" ItemsSource="{Binding GaugeSites}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>

                    <Label
                        Grid.Column="0"
                        Margin="10"
                        FontAttributes="Bold"
                        FontSize="20"
                        Text="{Binding Description}"
                        TextColor="Black" />

                    <Label
                        Grid.Column="1"
                        Margin="10"
                        FontSize="20"
                        Text="Click Me!">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding BindingContext.DoSomethingInteresting, Source={x:Reference collection1}}" />
                        </Label.GestureRecognizers>
                    </Label>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>

    </CollectionView>

然后您可以重试。

答案 1 :(得分:1)

也许这是多余的,但我会抓住机会。如其他答案所示,您需要将TapGestureRecognizer中的源设置为CollectionView的名称。但是,了解哪个GaugeSite实例与使用TabGestureRecognizer的CollectionView项相关联可能很有用。要添加此信息,请添加CommandParamter,即

    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding BindingContext.DoSomethingInteresting, 
                              CommandParameter="{Binding}"
                              Source={x:Reference YourCollectionName}}" />
    </Label.GestureRecognizers>

关于命令,您可以使用

DoSomethingInteresting = new Command<GaugeSite>((a) => DoSomething(a));

在您的viewmodels构造器中。而且lambda引用的方法是

void DoSomething(GaugeSite gaugeSite)
{
   // ....
}

希望这会有所帮助