Xamarin表單：如何處理ListView圖像單擊ViewModel中的事件？

Question

所有，

我我的列表視圖結合來自視圖模型的集合。 ListView的CellView包含一個圖像。我想在我的viewmodel中調用一個命令，當我點擊列表項中的圖像。我試圖避免在我的模型中的事件處理。任何想法 ？

謝謝！

下面給出的是xaml和視圖模型。

ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     xmlns:jList="clr-namespace:JList;assembly=JList" 
     x:Class="JList.Pages.ItemDetailPage" 
     Title="Sub Items" 
      BindingContext="{Binding Source={StaticResource Locator}, Path=ItemDetailViewModel}" 
     > 

<ContentPage.ToolbarItems > 
    <ToolbarItem Text="Add" Order="Primary" Priority="1" Command="{Binding AddItemCommand}"></ToolbarItem> 
    <ToolbarItem Text="Edit" Order="Primary" Priority="2" Command="{Binding EditItemCommand}"></ToolbarItem> 
</ContentPage.ToolbarItems> 
<StackLayout> 
<SearchBar Placeholder="Search..." VerticalOptions="Fill" SearchCommand="{Binding SearchCommand}" Text="{Binding SearchString}" ></SearchBar> 
<ListView RowHeight="200" ItemsSource="{Binding SubItemsCollection}" BackgroundColor="Gainsboro" SelectedItem="{Binding SubItemSelected, Mode=TwoWay}" x:Name="List" > 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell > 
       <StackLayout> 
        <Grid VerticalOptions="Fill" BackgroundColor="White" Padding="5"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition/> 
         </Grid.ColumnDefinitions> 
         <Image Source="{Binding ImagePath}" Aspect="AspectFit">       
         <Label Grid.Row="0" Grid.Column="0" Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Chocolate" Font="Bold,20" /> 
        </Grid> 
       </StackLayout> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 
</StackLayout> 
<ContentPage.Behaviors> 

    <jList:CustomBehavior /> 

</ContentPage.Behaviors> 

視圖模型

namespace JList.Core.ViewModels 
{ 
    public class ItemDetailViewModel : ViewModelBase, IViewModel 
    { 
     private IItemService _itemService; 
     private ICommandFactory _cmdFactory; 
     private INavigationService _navService; 
     private ItemListViewModel _parent; 
     private IAppInstanceData _appData; 

     public ItemDetailViewModel(IItemService itemService, ICommandFactory cmdFactory, INavigationService navService, IAppInstanceData appData, ItemListViewModel parent) 
     { 
      _itemService = itemService; 
      _cmdFactory = cmdFactory; 
      _navService = navService; 
      _parent = parent; 
      ParentItemSelected = _parent.ItemSelected.Id; 
      _appData = appData; 
      // FetchSubItemsAsync(); 
     } 


     public int ParentItemSelected { get; set; } 

     private string _searchString; 
     public String SearchString 
     { 
      get { return _searchString; } 
      set 
      { 
       if (_searchString != value) 
       { 
        _searchString = value; 
        OnPropertyChanged(); 
       } 
      } 
     } 

     private ObservableCollection<SubItem> _subItemsCollection; 

     public ObservableCollection<SubItem> SubItemsCollection 
     { 
      get { return _subItemsCollection; } 
      set 
      { 
       if (_subItemsCollection != null) 
       { 
        if (!_subItemsCollection.SequenceEqual(value)) 
        { 
         _subItemsCollection = value; 
         OnPropertyChanged(); 
        } 
       } 
       else 
       { 
        _subItemsCollection = value; 
        OnPropertyChanged(); 
       } 
      } 
     } 

     private async void FetchSubItemsAsync() 
     { 
      ParentItemSelected = _parent.ItemSelected.Id; 
      var items = await _itemService.GetAllSubItemsAsync(_parent.ItemSelected.Id); 
      var coll = new ObservableCollection<SubItem>(); 
      foreach (var it in items) 
      { 
       coll.Add(it); 
      } 
      SubItemsCollection = coll; 
     } 

     public void RefreshAsync() 
     { 
      FetchSubItemsAsync(); 
     } 

     private SubItem _itemSelected; 

     public SubItem SubItemSelected 
     { 
      get => _itemSelected; 
      set 
      { 
       _itemSelected = value; 
       // _navService.PushView(typeof(EditSubItemViewModel).ToString()); 
      } 
     } 

     #region FetchCommand 

     private ICommand _fetchItemsCommand; 

     public ICommand FetchItemsCommand 
     { 
      get 
      { 
       if (_fetchItemsCommand == null) 
        _fetchItemsCommand = _cmdFactory.CreateCommand(FetchSubItemsAsync,() => true); 
       return _fetchItemsCommand; 
      } 
     } 


     #endregion 

     #region AddItemCommand 

     private ICommand _addItemCommand; 

     public ICommand AddItemCommand 
     { 
      get 
      { 

       if (_addItemCommand == null) 
        _addItemCommand = _cmdFactory.CreateCommand(AddItem,() => true); 
       return _addItemCommand; 
      } 
     } 
     public void AddItem() 
     { 
      _appData.IsEditSubItem = false; 
      _navService.PushView(typeof(SubItemViewModel).ToString()); 
     } 
     #endregion 

     #region EditItemCommand 

     private ICommand _editItemCommand; 


     public ICommand EditItemCommand 
     { 
      get 
      { 
       if (_editItemCommand == null) 
        _editItemCommand = _cmdFactory.CreateCommand(EditItem,() => true); 
       return _editItemCommand; 
      } 
     } 
     public void EditItem() 
     { 
      _appData.IsEditSubItem = true; 
      _navService.PushView(typeof(SubItemViewModel).ToString()); 
     } 
     #endregion 

     #region SearchCommand 

     private ICommand _searchCommand; 


     public ICommand SearchCommand 
     { 
      get 
      { 
       if (_searchCommand == null) 
        _searchCommand = _cmdFactory.CreateCommand(SearchItemAsync,() => true); 
       return _searchCommand; 
      } 
     } 
     private async void SearchItemAsync() 
     { 
      var items = await _itemService.GetAllSubItemsAsync(_parent.ItemSelected.Id); 
      var sstring = SearchString.ToLower(); 
      items = items.Where(i => i.Name.ToLower().Contains(sstring)); 
      var coll = new ObservableCollection<SubItem>(); 
      foreach (var it in items) 
      { 
       coll.Add(it); 
      } 
      SubItemsCollection = coll; 
     } 
     #endregion 

    } 
} 

Answer 1

您可以添加TapGestureRecognizer的形象和你的視圖模型綁定命令。另外，您正在綁定ViewCell中的命令，因此您需要設置BindingContext的源。

<ContentPage x:Name="ABCPage"> 
    ... 
    <Image Source="abc"> 
    <Image.GestureRecognizers> 
     <TapGestureRecognizer 
     Command="{Binding Path=BindingContext.ImageCommand, Source={x:Reference Name=ABCPage}}" 
     CommandParameter="{Binding .}" /> 
    </Image.GestureRecognizers> 
    </Image> 
    ... 
</ContentPage>