Xamarinフォーム - カスタムViewCell用の画像タップハンドラ

Question

私はカスタムセルを持つListViewを持っています。各カスタムセルでは、ユーザは、セル内の機能を呼び出すために、画像を見ている楕円をタップすることができます。この時点で私は審美的な問題に焦点を当てています。

私は楕円形で、画像を含むボタンでこれを実装している注意してください。タップイベントにネイティブに応答するため、ボタンを使用しました。問題はボタンに境界線があることです。また、ボタンには希望よりも少ないタップアニメーションがあります。

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

ボタンの代わりに簡単なイメージがうまくいくと思います。ただし、画像にはネイティブの「タップ」処理やICommand処理はありません。 TapGestureRecognizerを使用すると、画像を含む他の要素にこのタイプの振る舞いを付けることができます。コードは次のようになります...

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

各ViewCellには、このジェスチャー認識ツールを添付しなければならない画像があります。しかし、私のモデルではイメージを名前で参照することはできません。

各ViewCellの画像にタップハンドラを有効にし、モデル内のタップを処理する方法はありますか？

Answer 1

はい、XamlでTapGestureRecognizerを追加して、Viewmodelでコマンドを受け取ることができます。詳細はXamarin Documentationをご覧ください。

あなたの場合は、このようになります。

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