Question

我有一个带有自定义单元格的ListView。在每个自定义单元格中，用户可以点击省略图像以调用单元格中的功能。在这一点上，我专注于审美问题。

注意我已经使用包含带有省略号的图像的Button实现了这一点。我使用了Button，因为它本身响应了tap事件。问题是按钮有边框。此外，该按钮的点击动画不太理想。

<ListView x:Name="___listview" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="10" Margin="10">
                    <Button Image="{Binding ImageName}" Command="{Binding UpCount}" 
                            BackgroundColor="White" WidthRequest="50" />
                    <Label Text="{Binding Count}" HorizontalOptions="CenterAndExpand" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

每个ViewCell都绑定到以下模型。

public class Model : INotifyPropertyChanged
{
    public Model()
    {
        _count = 0;
        _imageName = "ellipses_vertical.png";
        UpCount = new Command(() =>
        {
            Count++;
            ImageName = (_imageName == "ellipses_vertical.png") 
                                    ? "ellipses_horizontal.png" 
                                    : "ellipses_vertical.png";
        });
    }

    int _count;
    public int Count
    {
        get { return _count; }
        set { if (_count != value) { _count = value; OnPropertyChanged("Count"); } }
    }

    string _imageName;
    public string ImageName
    {
        get { return _imageName; }
        set { if (_imageName != value) { _imageName = value; OnPropertyChanged("ImageName"); } }
    }

    public ICommand UpCount { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

我认为更好的是用一个简单的图像代替Button。但是，图片没有原生＆＃39;点击＆＃39;处理或ICommand处理。使用TapGestureRecognizer，您可以将此类行为附加到其他元素，包括图像。代码看起来像这样......

var tg= new TapGestureRecognizer();
tg.Tapped += (s, e) => {
    // handle the tap
};
image.GestureRecognizers.Add(tg);

每个ViewCell都有一个Image，这个Gesture Recognizer需要附加。但是，我无法在模型中按名称引用图像。

是否有办法为每个ViewCell图像启用点击处理程序并处理模型中的点击（不是后面的代码）？

Answer 1

是的，您可以在Xaml中添加TapGestureRecognizer并在Viewmodel中接收命令。有关详细信息，请查看Xamarin Documentation。

在你的情况下，它看起来像这样。

<Image Source="{Binding ImageName}">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
            Command="{Binding UpCount}" />
    </Image.GestureRecognizers>
</Image>

Xamarin Forms - 自定义ViewCells的图像点击处理程序

1 个答案: