Xamarin Forms 获取对象元素在图像单击

Question

>我有一个问题。我从一个名为：List<Set> Sets的列表创建了一个 CollectionView，在一个集合中，我有一个名为List<Picture> Pictures的列表。

以下是这些类的外观：

public class Set
{
public int Id { get; set; }
public List<Picture> Pictures{ get; set; }
}

图片类如下所示：

public class Picture
{
public int Id { get; set; }
public string Name { get; set; }
}

现在，在我的 XAML 中，我在每个图像上都添加了单击事件，因为我需要知道单击了哪个图像。问题是我还需要知道图像单击是在哪个集合中完成的，因为一个图像可以有多个集合。

下面是 XAML：

<CollectionView ItemsSource="{Binding Sets}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ScrollView Orientation="Horizontal">
<StackLayout BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ff:CachedImage Aspect="AspectFill" Source="{Binding imageSource}">
<ff:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="AlbumFoto_Clicked" />
</ff:CachedImage.GestureRecognizers>
</ff:CachedImage>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

现在我已经得到了这个代码：

private void AlbumFoto_Clicked(object sender, EventArgs e)
{
CachedImage image = (CachedImage)sender;
var setPicture = image.Source.BindingContext as Picture;
var ImageId = setPicture.Id;
var Pictureindex = 0;
foreach (var set in Sets.Where(set => Pictures.Picture.Any(p => p.Id == ImageId)))
{
Pictureindex = set.Pictures.Picture.FindIndex(p => p.Id == ImageId);
}
}

现在如何从点击的图像集中获取 ID？

Answer 1

不要使用click 事件，而应使用Command和CommandParameter并使用父集合的 BindingContext

<CollectionView ItemsSource="{Binding Sets}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ScrollView x:Name="ParentCollection" Orientation="Horizontal">
<StackLayout BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ff:CachedImage Aspect="AspectFill" Source="{Binding imageSource}">
<ff:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ImageClickCommand}" CommandParameter="{Binding BindingContext.Id, Source={x:Reference Name=ParentCollection}}"/>
</ff:CachedImage.GestureRecognizers>
</ff:CachedImage>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

在您的视图模型中：

public Command<int> ImageClickCommand{ get; set; }

在您的视图模型构造函数中：

ImageClickCommand = new Command<int>((Id) =>
{
//Id -> id of the image
});

但是，如果您仍然想使用点击事件，我建议您进行此更改。

向图片类添加新属性：

public class Picture
{
public int Id { get; set; }
public int SetId { get; set; }
public string Name { get; set; }
}

假设您从服务接收该集合，您可以迭代它并按如下所示设置 SetId：

foreach (var item in Collection)
{
foreach (var picture in item.Pictures)
{
picture.SetId = item.Id   
}         
}

现在，在您的点击中，您应该可以访问图片 ID 和重复的集 ID：

private void AlbumFoto_Clicked(object sender, EventArgs e)
{
CachedImage image = (CachedImage)sender;
var setPicture = image.Source.BindingContext as Picture;
var ImageId = setPicture.Id;
var SetId = setPicture.SetId;
//...
}